(1)表格内容高度改变
(2)表格背景色以及每行背景色改变
<el-tabel
:cell-style="{background:'#fff'}"
:header-cell-style="{
background-color:'#ececec',
fontWeight:700,
color:'#000'
}"
>
(3)表格选择框 部分不能选中
<el-table-column type="selection" :selectable="isRowSelectable"/>
isRowSelectable(row){
if(row.lx === '01'){
return false
}else{
return true
}
}
(4)是否在表尾显示合计行(底部加的总数)
<el-table v-loading="loding" :data="list" show-summary :summary-method="getSummaries">
<el-table-column label="姓名" align="center" prop="xm"> </el-table-column>
<el-table-column label="语文" align="center" prop="yw"> </el-table-column>
<el-table-column label="数学" align="center" prop="xs"> </el-table-column>
</el-table>
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = param.length;
return;
}
if (index === 1) {
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);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
}
(5)在表格末尾加合计
<el-table v-loading="loding" :data="list" show-summary :summary-method="getSummaries">
<el-table-column label="姓名" align="center" prop="xm"> </el-table-column>
<el-table-column label="语文" align="center" prop="yw"> </el-table-column>
<el-table-column label="数学" align="center" prop="xs"> </el-table-column><el-table-column label="总数" align="center" prop="zs"> </el-table-column>
</el-table>
在数据得到的时候将这个总数整个字段并计算出来