el-table的表格合计官网给出了属性和方法,但是合计是在表格的下方,若是把合计行放在上面,一个简单的方法实现它:
效果如图:
方法如下:
<el-table :data="tableData" class="customTable" :summary-method="getSummaries" show-summary border style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="total" label="合计"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="amount1" sortable label="数值 1">
<template slot-scope="{row}">
<el-input v-model="row.amount1"></el-input>
</template>
</el-table-column>
</el-table>
showSummariesPosition() {
const table = document.querySelector('.customTable') // customTable这个是在el-table定义的类名
const footer = document.querySelector('.customTable .el-table__footer-wrapper')
const body = document.querySelector('.customTable .el-table__body-wrapper')
table.removeChild(footer) // 移除表格最下方的合计行
table.insertBefore(footer, body) // 把合计行插入到表格body的上面
}
getSummaries(){ // 合计行的方法,官网很详细
}
在mounted钩子函数调用这个方法就可以啦