element-ui el-table总计位于表格第一行且支持多选
el-table文档中的总计是放在最后一行的,现在需要放在第一行,就需要自己去实现。逻辑是拿到table的数据list后,将总计total unshift到list数组里面,这样就能实现总计在表格第一行。如果表格还支持多选,为了防止第一行总计被选中,就必须要采取点措施了。
直接看代码:
<template>
<el-table
:data="list"
style="width: 100%;"
ref="multipleTable"
stripe
size="small"
:cell-class-name="getCellClassName"
:span-method="arraySpanMethod">
<el-table-column
type="selection"
width="55"
:selectable="checkboxInit">
</el-table-column>
<template v-for="item in theads">
<el-table-column
v-if="item.key == 'switch'"
:key="item.index"
:label="item.name">
<template slot-scope="scope">
<div v-if="scope.$index!=0>
{{scope.row.name}}
</div>
<div v-else>总计<strong>{{totalCount}}</strong>个</div>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {}
},
methods: {
checkboxInit(row, index) {
return index === 0 ? 0 : 1;
},
getCellClassName(scope) {
return scope.rowIndex === 0 && scope.columnIndex === 0 ? 'hide-selection' : 'show-selection';
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
if (columnIndex === 1) {
return [1, 2];
} else if (columnIndex === 2) {
return [0, 0]
}
}
}
}
}
</script>
<style>
.el-table {
.hide-selection .el-checkbox__input {
display: none
}
}
</style>
解释下,代码中三个methods的作用,getCellClassName是让第一行的checkbox不显示,checkboxInit 作用是让第一行checkbox不能选择,目的是在全选的时候不包括第一行总计数据,这个方法不能省略。 arraySpanMethod目的是合并第一行的第2,3列单元格,可选择不要,如果不想总计那个单元格数据换行可以加上。
效果图: