这里就不写合计的方式了
首先将合计列放入首行
mounted () {
this.showSummariesPosition()
},
destroyed () {
//进行销毁
this.showSummariesPosition()
},
methods: {
showSummariesPosition () {
const table = document.querySelector('.table-self') // customTable这个是在el- table定义的类名
const footer = document.querySelector('.table-self .el-table__footer-wrapper')
const body = document.querySelector('.table-self .el-table__body-wrapper')
table.removeChild(footer) // 移除表格最下方的合计行
table.insertBefore(footer, body) // 把合计行插入到表格body的上面
this.$nextTick(() => {
//固定列的也进行一下位置调换
const left = document.querySelector('.el-table__fixed')
const leftfooter = document.querySelector('.el-table__fixed .el-table__fixed-footer-wrapper')
const leftbody = document.querySelector('.el-table__fixed .el-table__fixed-body-wrapper')
leftbody.style.top = '0px'
console.log(leftbody);
left.removeChild(leftfooter) // 移除表格最下方的合计行
left.insertBefore(leftfooter, leftbody) // 把合计行插入到表格body的上面
})
}
}
此时看着还有点覆盖问题 加入样式
.el-table__footer-wrapper {
position: sticky;
bottom: 0;
z-index: 1; /* 可选,确保合计行在表格中的最上层 */
}
那么此时就放入第一行了
那么此时添加表格列宽拖动事件
//table添加拖动事件
<el-talbe @header-dragend="handleDragend"> </el-table>
handleDragend (newWidth, oldWidth, column, event) {
this.$nextTick(() => {
this.$refs.table.doLayout()
})
},