element table自定义合计行

韶光鸭

已于 2022-12-07 16:46:32 修改

阅读量864

点赞数

文章标签： vue.js 前端 javascript

于 2022-12-07 16:45:46 首次发布

本文链接：https://blog.csdn.net/weixin_48667689/article/details/128222275

版权

element table自定义合计行

需求要求表尾合计行与模块租赁面积比较，如果相同则不做修改，不同则需要变红，并且总数后插入文字。
看到需求我觉得很简单，直接上手就做，在summary-method合计方法中判断，取到表尾更改样式即可，但现实很骨感，竟然取不到<td>
在这里插入图片描述
斟酌后我才想到，需要加个this.$nextTick(()=>{})方法，这样便能完整的拿到所有的td标签，我们可以使用this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')获取到所有的td，获取到的td为数组，再去修改td的样式。

所有的代码如下：

 <el-table size="mini" :data="involvedOrgs" :summary-method="getSummaries" show-summary ref="tableRef"
                        style="width: 100%;margin-top:10px;">
                        <el-table-column prop="orgType" label="涉及机构类型" width="200"></el-table-column>
                        <el-table-column prop="orgName" label="涉及机构名称" min-width="200"></el-table-column>
                        <el-table-column prop="organizationArea" label="该机构面积" min-width="200"></el-table-column>
                        <el-table-column label="操作" fixed="right" align="center" width="80">
                            <template slot-scope="scope">
                                <el-button :disabled="disalbedForm" size="mini" type="danger"
                                    @click="removeInvolvedOrg(scope.$index)">删除
                                </el-button>
                            </template>
                        </el-table-column>
  </el-table>

js如下

 //表尾合计
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        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);
                        if(index == 2){
                            let newVal = sums[index];
                            this.rentRefundForm.baseInfo.organizationAreaList = sums[index].toFixed(2);
                            this.$nextTick(()=>{
                                let td = this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')
                                if (td.length != 0) {
                                    for (var i = 0; i < td.length; i++) {
                                        // let html = this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')[i].querySelector('.cell'); 获取这里可以直接修改DOM
                                        if(newVal == this.rentRefundForm.baseInfo.rentalArea){
                                            if(i == 0){
                                                td[0].style.color = 'black'
                                            }else if(i == 2) {
                                                td[2].innerHTML =  newVal.toFixed(2)
                                                td[2].style.color = 'black'
                                            }
                                        }else {
                                            if(i == 0){
                                                td[0].style.color = 'red'
                                            }else if(i == 2) {
                                                td[2].innerHTML =  newVal.toFixed(2) + '（各职场合计值与租赁面积（m2）不一致）'
                                                td[2].style.color = 'red'
                                            }
                                        }
                                    }
                                }
                            })

                        }
                    } else {
                        sums[index] = '-';
                    }
                });
                return sums;
            },