Element中table組件按照屬性執(zhí)行合并操作詳解

更新時(shí)間：2022年11月14日 08:50:54 作者：騎上我心愛(ài)的小摩托

在我們?nèi)粘ｉ_(kāi)發(fā)中，表格業(yè)務(wù)基本是必不可少的，對(duì)于老手來(lái)說(shuō)確實(shí)簡(jiǎn)單，家常便飯罷了，但是對(duì)于新手小白如何最快上手搞定需求呢？本文從思路開(kāi)始著手，幫你快速搞定表格

在實(shí)際開(kāi)發(fā)中，要求使用elementUI的table組件對(duì)表格數(shù)據(jù)上下行相鄰相同的數(shù)據(jù)進(jìn)行合并，在elem官網(wǎng)上查看到是有對(duì)應(yīng)的組件和合并方法

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

其中官網(wǎng)的objectSpanMethod比較簡(jiǎn)單，根據(jù)每隔兩行就合并兩行的數(shù)據(jù)，并不能滿(mǎn)足實(shí)際的需求，下面直接上代碼

1、首先需要生成一個(gè)與行數(shù)相同的數(shù)組，通過(guò)判斷上下數(shù)據(jù)是否相同，記錄每一行設(shè)置的合并數(shù)。這里以合并三列屬性為例：

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]) {}這里就是判斷當(dāng)前元素與上一個(gè)元素是否相同

如果第一條記錄索引為0，向數(shù)組中push 1，設(shè)置索引值

如果不是第一條記錄，判斷與前一條記錄是否相等，相等則向?qū)?yīng)的屬性數(shù)組spanArr、spanCodeArr、spanProxyArr添加元素0

且將前一條記錄+1，即需要合并的行數(shù)+1，直到得到所有需要合并的行數(shù)

2、官方介紹是通過(guò)給table傳入span-method方法可以實(shí)現(xiàn)合并行或列，方法的參數(shù)是一個(gè)對(duì)象，里面包含當(dāng)前行row、當(dāng)前列column、當(dāng)前行號(hào)rowIndex、當(dāng)前列號(hào)columnIndex四個(gè)屬性。該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表rowspan，第二個(gè)元素代表colspan。也可以返回一個(gè)鍵名為rowspan和colspan的對(duì)象

 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、結(jié)合組件使用

<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>

到此這篇關(guān)于Element中table組件按照屬性執(zhí)行合并操作詳解的文章就介紹到這了,更多相關(guān)Element table組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: