1.将列表进行合计操作

<el-table id="editAbleTrends" :data="tableData" ref="tableData" height="500" style="width: 100%;" :header-cell-style="{background:'rgb(242, 242, 242)'}" center border highlight-current-row  show-summary :summary-method="getSummaries" >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="date1" label="名字" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="date2" label="年龄" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="address" label="分数" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="name1" label="性别" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="name2" label="年级" :show-overflow-tooltip="true">
</el-table>

  tableData:[
        {date1:1,address:"-"},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},        
      ],

 methods: {
     // 自定义合计规则
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          console.log('index',index);
          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 (Number(prev) + Number(curr) ).toFixed(2);
              } else {
                return Number(prev).toFixed(2);
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        });
        return sums;
      },
  },

2.进行合计行-------合并

 // 监控data中的数据变化
  watch: {
    tableDataList:{
        immediate:true,
        async handler(){
          //await this.$nextTick(); 根据实际选择延迟调用
          await this.$nextTick();
          const tables = document.querySelectorAll('#editAbleTrends .el-table__footer-wrapper tr>td');
          console.log('tables',tables);
          tables[0].colSpan=3;
          tables[0].style.textAlign='center'
          tables[1].style.display='none'
          tables[2].style.display='none'
          tables[3].colSpan=3;
          tables[3].style.textAlign='center'
          tables[4].style.display='none'
          tables[5].style.display='none'
       }
    }
 },

标签：date1,tables,10,index,sums,列表,ui,address,element
来源： https://blog.csdn.net/ingenuou_/article/details/120883639