效果:
<div class="dot_box">
<div class="dot"></div>
<span>SA项目成交数合计</span>
<div class="right_btn"><a href="#" @click="downloadTable('dataList','SA项目成交数合计')">导出表格</a></div>
</div>
<div class="data_box">
<el-table
id="dataList"
ref="table"
:data="dataList2"
:header-cell-style="getHeaderStyleNone"
:cell-style="setRowStyleColorNone"
:cell-class-name="cellClassName"
@cell-click="selectData"
show-summary
:summary-method="getSummaries"
style="overflow-x: scroll">
<el-table-column
v-for="(item, index) in dataList2[0]"
:key="item.id"
:prop="index"
:fixed="index.replace(/[^0-9]/ig,'')*1 === 0 ? 'left' : false "
>
<template slot-scope="scope" v-if="index.indexOf('td') != -1">
<a href="#">{{scope.row[index]}}</a>
</template>
</el-table-column>
</el-table>
</div>
重点： 不能用 display:none 否则页面会卡死
getHeaderStyleNone() {
return "opacity: 0;";
},
setRowStyleColorNone(row, column, rowIndex, columnIndex) {
// console.log("选中行",this.row)
// console.log("循环行",row)
var row_Index = this.row.index
var column_Index = this.column.index
if (column_Index && column_Index == row.columnIndex) {
if (row_Index && row_Index == row.rowIndex) { // 列
return 'background: #ebecee; color: red;fontSize:20px'
}
return 'background: #ebecee; color:#000'
} else if (row_Index && row_Index == row.rowIndex) {
if (column_Index && column_Index == row.columnIndex) {
return 'background: #ebecee; color: red'
}
return 'background: #ebecee; color:#000'
} else {
return 'background: #fff; color: #0D0E12'
}
},
cellClassName({ row, column, rowIndex, columnIndex }) {
row.index = rowIndex;
column.index = columnIndex;
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
if (column.property == "index") {
sums[index] = '';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
sums[index] = 'N/A';
}
});
return sums;
},
数据封装格式如下：
querySADealFeedback(params){
net.request("url", "post", null, params).then(res => {
if (res.code == 0) {
let data = res.data
if (data) {
data[0][data[0].length - 1] = "合计"
}
let labelArr = []
let dataList = []
for (let i = 0; i < data[0].length; i++) {
labelArr.push('td' + i)
}
for (let i = 0; i < data.length - 2; i++) {
let list = {}
for (let j = 0; j < data[i].length; j++) {
let label = 'td' + j
let dataStr = data[i][j]
list[label] = dataStr
}
dataList.push(list)
}
console.log(dataList)
this.dataList2 = dataList
this.$nextTick(() => {
this.$refs['table2'].doLayout();
})
} else {
net.message(this, "获取数据失败", "warning");
}
})
},
导出数据
downloadTable(elTableId, name){
let tables = document.getElementById(elTableId).cloneNode(true) // 重点
tables.removeChild(tables.querySelector(".el-table__fixed")) // 重点
let table_book = XLSX.utils.table_to_book(tables)
var table_write = XLSX.write(table_book, {
bookType: 'xlsx',
bookSST: true,
type: 'array',
})
try {
FileSaver.saveAs(
new Blob([table_write], { type: 'application/octet-stream' }),
name+".xlsx"
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, table_write)
}
return table_write
},
标签：el,return,表格,index,column,let,table,data,row From： https://www.cnblogs.com/weiweiyeyu/p/17139962.html