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 = null
            const {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;
        },