Element中table组件按照属性执行合并操作详解

时间:2022-11-16 骑上我心爱的小摩托人气:0

在实际开发中，要求使用elementUI的table组件对表格数据上下行相邻相同的数据进行合并，在elem官网上查看到是有对应的组件和合并方法

 <el-table :data="tableData" :span-method="objectSpanMethod">
   <el-table-column prop="id" label="ID" width="180"> </el-table-column>
</el-table>

其中官网的objectSpanMethod比较简单，根据每隔两行就合并两行的数据，并不能满足实际的需求，下面直接上代码

1、首先需要生成一个与行数相同的数组，通过判断上下数据是否相同，记录每一行设置的合并数。这里以合并三列属性为例：

getSpanArr(data) {
      this.spanArr = [];
      this.spanCodeArr = [];
      this.spanProxyArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.spanCodeArr.push(1);
          this.spanProxyArr.push(1);
          this.pos = 0;
          this.codePos = 0;
          this.proxyPos = 0;
        } else {
          Object.keys(this.columns).forEach((item, index) => {
            if (index === 0) {
              if (data[i][item] === data[i - 1][item]) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            } else if (index === 1) {
              if (data[i][item] === data[i - 1][item]) {
                this.spanCodeArr[this.codePos] += 1;
                this.spanCodeArr.push(0);
              } else {
                this.spanCodeArr.push(1);
                this.codePos = i;
              }
            } else if (index === 2) {
              if (data[i][item] === data[i - 1][item]) {
                this.spanProxyArr[this.proxyPos] += 1;
                this.spanProxyArr.push(0);
              } else {
                this.spanProxyArr.push(1);
                this.proxyPos = i;
              }
            }
          });
        }
      }
    },

其中 if (data[i][item] === data[i - 1][item]) {}这里就是判断当前元素与上一个元素是否相同

如果第一条记录索引为0，向数组中push 1，设置索引值

如果不是第一条记录，判断与前一条记录是否相等，相等则向对应的属性数组spanArr、spanCodeArr、spanProxyArr添加元素0

且将前一条记录+1，即需要合并的行数+1，直到得到所有需要合并的行数

2、官方介绍是通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 1) {
        const _row = this.spanCodeArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 2) {
        const _row = this.spanProxyArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }

3、结合组件使用

<q-table
        :data="tableData"
        border
        :span-method="objectSpanMethod"
        height="400"
        style="width: 100%">
       <q-table-column v-for="(item,index) in Object.keys(columns)" :key="index"
          :prop="item"
          :label="columns[item]">
       </q-table-column>
      </q-table>

加载全部内容