vue el-table 动态添加行与删除行的实现_vue.js_

summary-method=“getSummaries” show-summary

// 合计行样式 .el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td { background-color: #e3f3ff !important; color: #666; } .el-table__footer-wrapper .is-leaf { color: #666 !important; } .el-table__fixed-footer-wrapper tbody td { border-top: 1px solid #ebeef5; background-color: #e3f3ff; color: #666; text-align: center !important; } .has-gutter tr td .cell { text-align: center; color: #001111; } //合并行放在第一行 .contentInfoWrap .el-table { display: flex; flex-direction: column; } .contentInfoWrap .el-table__body-wrapper { order: 1; } .contentInfoWrap .el-table__fixed-body-wrapper { top: 97px !important; } .contentInfoWrap .el-table__fixed-footer-wrapper { z-index: 0; top: 50px; }

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(param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[index] = 'Total(销量)' 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] = ' ' } }) return sums },