pc端权限表格合并行

261 阅读1分钟

合并单元格,如果id列值一致,则合并

<template>
  <div style="padding:20px">
    <el-table :data="tableData6" :span-method="objectSpanMethod" border>
      <el-table-column prop="name" label="模块" width="180" />
      <el-table-column prop="amount1" label="功能" />
      <el-table-column prop="amount3" label="权限">
        <template slot-scope="{ row }">
          <el-checkbox v-for="(item, index) in row.amount3" :key="index" :label="item" />
        </template>
      </el-table-column>>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spanArr: [], // 用于存放每一行记录的合并数
      tableData6: [{
        id: '1',
        name: '概况',
        amount1: '概况',
        amount3: ['查看']
      }, {
        id: '2',
        name: '运营管理',
        amount1: '用户管理',
        amount3: ['查看', '审核', '启用']
      }, {
        id: '2',
        name: '运营管理',
        amount1: '车型资料',
        amount3: ['查看', '审核', '启用']
      }, {
        id: '2',
        name: '运营管理',
        amount1: '计费标准',
        amount3: ['查看', '审核', '启用']
      }, {
        id: '3',
        name: '订单管理',
        amount1: '订单管理',
        amount3: ['查看', '审核', '启用']
      }]
    }
  },
  mounted: function() {
    this.getSpanArr(this.tableData6)
  },
  methods: {
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].id === data[i - 1].id) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
        console.log(`第${i}${this.spanArr}`)
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        console.log(`rowspan:${_row} colspan:${_col}`)
        return {
          // [0,0] 表示这一行不显示, [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>

效果图

image.png