el-table合计放在标题上方且合并列以及渲染后端返回的数据

el-table二次封装的父组件中的属性

            <y-table :table-data="tableData" :table-model="tableModel" :isShowSummary="true" :getSummaries="getSummaries"></y-table>

el-table合计放在标题上方

<style lang="scss" scoped>
/* /deep/ 为深度操作符，可以穿透到子组件 */
::v-deep .el-table {display: flex;flex-direction: column;
}::v-deep .el-table__footer-wrapper {order: -1;
}
</style>

合并列

// 父组件创建watch监听然后写入对应的方法watch: {tableData: {immediate: true,handler() {setTimeout(() => {const tds = document.querySelectorAll('.el-table__footer .has-gutter tr>td');tds[0].colSpan = 2;tds[0].style.textAlign = 'center'tds[1].style.display = 'none'}, 0)}}},

渲染后端返回的数据

// 自定义的合计计算方法getSummaries(param) {let ylanimalgoodscost = nullconst {columns, data} = param;const sums = [];columns.forEach((column, index) => {console.log(column)if (index === 0) {sums[index] = '合计';} else {sums[index] = '';}if (column.property === 'statusTime') {sums[index] = ylanimalgoodscost == null ? this.tableData[0]?.mobile : ''}if (column.property === 'balance') {sums[index] = ylanimalgoodscost == null ? this.tableData[0]?.status :''}})return sums;},