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

在实际开发中，要求使用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>

到此这篇关于Element中table组件按照属性执行合并操作详解的文章就介绍到这了,更多相关Element table组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！