elementUI的table合并行和列模板

elementUI的table合并行和列模板

最近没怎么接触elementUI的table表格的合并，研究了下行和列的合并，索性写个模板试下，也顺便记录下吧，代码和例图如下。

代码如下：

<template>
  <div>
    <el-table :data="tableData" :span-method="spanMethod" border style="width: 100%">
      <!-- 第一组：固定列 -->
      <el-table-column label="列1" prop="domain" width="120" />
      <el-table-column label="列2" prop="scene" width="140" />
      <el-table-column label="列3" prop="rule" width="200" />
      <el-table-column label="列4" prop="datatype" width="200" />
      <!-- 第二组：数据 -->
      <el-table-column label="各地区数据量">
        <el-table-column label="北京">
          <template slot-scope="{row}">
            <span v-if="row.key === 'abnornum'">{{ row.beijing }}台</span>
            <span v-else>{{ row.beijing }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上海">
          <template slot-scope="{row}">
            <span v-if="row.key === 'abnornum'">{{ row.shanghai }}台</span>
            <span v-else>{{ row.shanghai }}</span>
          </template>
        </el-table-column>
        <el-table-column label="广州">
          <template slot-scope="{row}">
            <span v-if="row.key === 'abnornum'">{{ row.shanghai }}台</span>
            <span v-else>{{ row.shanghai }}</span>
          </template>
        </el-table-column>
        <el-table-column label="深圳">
          <template slot-scope="{row}">
            <span v-if="row.key === 'abnornum'">{{ row.shanghai }}台</span>
            <span v-else>{{ row.shanghai }}</span>
          </template>
        </el-table-column>
        <el-table-column label="三亚">
          <template slot-scope="{row}">
            <span v-if="row.key === 'abnornum'">{{ row.shanghai }}台</span>
            <span v-else>{{ row.shanghai }}</span>
          </template>
        </el-table-column>
        <el-table-column label="重庆">
          <template slot-scope="{row}">
            <span v-if="row.key === 'abnornum'">{{ row.shanghai }}台</span>
            <span v-else>{{ row.shanghai }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {
      tableData: [
        // 原始一条规则
        // {
        //   domain: '数据1',
        //   scene: '第二列数据',
        //   rule: '第三列数据',
        //   beijing: { eqnum: 2527, busnum: 123145, abnornum: 2.2063 },
        //   shanghai: { eqnum: 3797, busnum: 29725, abnornum: 10.9268 },
        //   guangzhou: { eqnum: 12210, busnum: 42854, abnornum: 0.3407 },
        //   shenzhen: { eqnum: 955, busnum: 13701, abnornum: 5.7222 },
        //   sanya: { eqnum: 210, busnum: 4074, abnornum: 1.7919 },
        //   chongqing: { eqnum: 201, busnum: 15305, abnornum: 1.3133 }
        // }

        // 拆成 多行 行
        {
          domain: '数据1',
          scene: '第二列数据',
          rule: '第三列数据',
          key: 'eqnum', // 这一行显示"设备数"
          datatype: "设备数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据1',
          scene: '第二列数据',
          rule: '第三列数据',
          key: 'busnum',   // 业务数
          datatype: "业务数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据1',
          scene: '第二列数据',
          rule: '第三列数据',
          key: 'abnornum',    // 异常数
          datatype: "异常数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          domain: '数据1',
          scene: '第二列数据',
          rule: '第三列数据1',
          key: 'eqnum', // 这一行显示"设备数"
          datatype: "设备数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据1',
          scene: '第二列数据',
          rule: '第三列数据1',
          key: 'busnum',   // 业务数
          datatype: "业务数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据1',
          scene: '第二列数据',
          rule: '第三列数据1',
          key: 'abnornum',    // 异常数
          datatype: "异常数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },

        {
          domain: '数据1',
          scene: '第二列数据2',
          rule: '第三列数据2',
          key: 'eqnum', // 这一行显示"设备数"
          datatype: "设备数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据1',
          scene: '第二列数据2',
          rule: '第三列数据2',
          key: 'busnum',   // 业务数
          datatype: "业务数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据1',
          scene: '第二列数据2',
          rule: '第三列数据2',
          key: 'abnornum',    // 异常数
          datatype: "异常数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },

        {
          domain: '数据11',
          scene: '第二列数据2',
          rule: '第三列数据1-1',
          key: 'eqnum', // 这一行显示"设备数"
          datatype: "设备数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据11',
          scene: '第二列数据2',
          rule: '第三列数据1-1',
          key: 'busnum',   // 业务数
          datatype: "业务数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据11',
          scene: '第二列数据2',
          rule: '第三列数据1-1',
          key: 'abnornum',    // 异常数
          datatype: "异常数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },

        {
          domain: '数据11',
          scene: '第二列数据2',
          rule: '第三列数据1-2',
          key: 'eqnum', // 这一行显示"设备数"
          datatype: "设备数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据11',
          scene: '第二列数据2',
          rule: '第三列数据1-2',
          key: 'busnum',   // 业务数
          datatype: "业务数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        },
        {
          // ...同上,
          domain: '数据11',
          scene: '第二列数据2',
          rule: '第三列数据1-2',
          key: 'abnornum',    // 异常数
          datatype: "异常数",
          beijing: 2527,
          shanghai: 3797,
          guangzhou: 12210,
          shenzhen: 955,
          sanya: 210,
          chongqing: 201
        }

      ]
    }
  },
  computed: {

  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // // 只处理前 3 列
      // // 'domain', 'scene',
      // if (['rule'].includes(column.property)) {
      //   // 每 3 行合并一次
      //   if (rowIndex 台 3 === 0) {
      //     return { rowspan: 3, colspan: 1 };
      //   } else {
      //     return { rowspan: 0, colspan: 0 }; // 隐藏掉第二、三行
      //   }
      // } else if (['scene'].includes(column.property)) {
      //   // 每 6行合并一次
      //   if (rowIndex 台 9 === 0) {
      //     return { rowspan: 9, colspan: 1 };
      //   } else {
      //     return { rowspan: 0, colspan: 0 }; // 隐藏掉第二、三行
      //   }
      // } else if (['domain'].includes(column.property)) {
      //   // 每 9 行合并一次
      //   if (rowIndex 台 this.tableData.length === 0) {
      //     return { rowspan: this.tableData.length, colspan: 1 };
      //   } else {
      //     return { rowspan: 0, colspan: 0 }; // 隐藏掉第二、三行
      //   }
      // }
      // // 其余列不合并
      // return { rowspan: 1, colspan: 1 };

      // 函数处理
      if (columnIndex == 0) {
        let _row = this.fillterData(this.tableData, 'domin').one[rowIndex]
        let _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else if (columnIndex == 1) {
        let _row = this.fillterData(this.tableData, 'scene').one[rowIndex]
        let _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else if (columnIndex == 2) {
        let _row = this.fillterData(this.tableData, 'rule').one[rowIndex]
        let _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    fillterData(arr, ele) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index == 0) {
          spanOneArr.push(1)
        } else {
          if (item[ele] === arr[index - 1][ele]) {
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr
      }
    }
  }
}
</script>

<style scoped></style>

例图如下：