Element-ui table动态合并单元格?

<template>
  <el-table
    :data="dataSource"
    :span-method="objectSpanMethod"
  >
    <el-table-column
      label="分组名称"
      width="100"
      align="center"
      prop="groupName"
    />
    <el-table-column
      prop="type"
      label="类型"
      align="center"
      width="100"
    />
    <el-table-column
      prop="fastCoding"
      label="快捷编码"
      align="center"
      width="70"
    />
    <el-table-column
      label="快捷语"
      width="350"
    >
      <template slot-scope="scope">
        <img
          :src="scope.row.content"
          class="imgSize"
        >
      </template>
    </el-table-column>
    <el-table-column
      prop="shortFastType"
      label="快捷语类型"
      align="center"
      width="120"
    />
    <el-table-column
      prop="updateTime"
      label="更新时间"
      align="center"
      width="150"
    />
    <el-table-column
      align="center"
      label="操作"
    >
      <template slot-scope="scope">
        <el-button
          type="text"
          size="small"
          @click="editShortcut(scope.row)"
        >
          编辑快捷语
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="delData(scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  data () {
    return {
      dataSource: [], // 列表
      spanArr: [], // 记录每一行的合并数
      pos: 0// 记录索引
    };
  },
  mounted () {
    this.spanArr = [];
    this.getSpanArr(this.dataSource);
  },
  methods: {
    getSpanArr (data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].groupName === data[i - 1].groupName) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      };
    }
  }

});
</script>

 

posted @ 2021-04-08 16:27  程序員劝退师  阅读(689)  评论(0编辑  收藏  举报