Vue----动态表格如何简单实现

效果图如下：

具体实现：

<el-table :data="tableList" :cell-style="cellStyle" :span-method="objectSpanMethod" :header-cell-style="{textAlign: 'center'}" border style="width: 100%">
  <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" align='center' :label="item.label"/>
</el-table>

data中的数据如下：

tableList: [
  {
    name:'北京',
    dept:'财务部',
    column_0:'1.0',
    column_1:'0.0',
  },
  {
    name:'北京',
    dept:'财务部',
    column_0:'1.0',
    column_1:'0.0',
  },
  {
    name:'北京',
    dept:'合计',
    column_0:'2.0',
    column_1:'0.0',
  },
  {
    name:'南京',
    dept:'业务部',
    column_0:'2.0',
    column_1:'1.0',
  },
  {
    name:'南京',
    dept:'合计',
    column_0:'2.0',
    column_1:'1.0',
  }
],
//动态表头
tableColumns: [
  {label: "省市", prop: "name"},
  {label: "部门", prop: "dept"},
  {label: "金额1", prop: "column_0"},
  {label: "金额2", prop: "column_1"}
], 

methods下实现方式：

methods: {
  cellStyle({ row, column, rowIndex, columnIndex }) {
    if (row.dept == '合计') {
      return {
        backgroundColor: '#ffaf48',
        color:'black',
        fontWeight:'bold'
      }
    } else {
      return 'background-color: white;';
    }
  },
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      // 获取当前单元格的值
      const currentValue = row[column.property];
      // 获取上一行相同列的值
      const preRow = this.tableList[rowIndex - 1];
      const preValue = preRow ? preRow[column.property] : null;
      // 如果当前值和上一行的值相同，则将当前单元格隐藏
      if (currentValue === preValue) {
        return { rowspan: 0, colspan: 0 };
      } else {
        // 否则计算当前单元格应该跨越多少行
        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.tableList.length; i++) {
          const nextRow = this.tableList[i];
          const nextValue = nextRow[column.property];
          if (nextValue === currentValue) {
            rowspan++;
          } else {
            break;
          }
        }
        return { rowspan, colspan: 1 };
      }
    }
  },

}