欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年11月14日 08:50:54   作者:騎上我心愛的小摩托  
在我們?nèi)粘i_發(fā)中,表格業(yè)務(wù)基本是必不可少的,對(duì)于老手來(lái)說(shuō)確實(shí)簡(jiǎn)單,家常便飯罷了,但是對(duì)于新手小白如何最快上手搞定需求呢?本文從思路開始著手,幫你快速搞定表格

在實(shí)際開發(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ù),并不能滿足實(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 在vue項(xiàng)目中引入vue-beauty操作方法

    在vue項(xiàng)目中引入vue-beauty操作方法

    在本篇文章里小編給大家分享了關(guān)于在vue項(xiàng)目中引入vue-beauty操作方法,有需要的朋友們跟著學(xué)習(xí)參考下。
    2019-02-02
  • vue如何引入sass全局變量

    vue如何引入sass全局變量

    sass或者less都提供變量設(shè)置,在需求切換主題的項(xiàng)目中使用less或者sass變量,這篇文章主要介紹了vue引入sass全局變量,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-06-06
  • vue使用vue-video-player無(wú)法播放本地視頻的問題及解決

    vue使用vue-video-player無(wú)法播放本地視頻的問題及解決

    這篇文章主要介紹了vue使用vue-video-player無(wú)法播放本地視頻的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說(shuō)明

    Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說(shuō)明

    這篇文章主要介紹了Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue渲染過(guò)程淺析

    Vue渲染過(guò)程淺析

    這篇文章主要介紹了Vue渲染過(guò)程淺析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-03-03
  • 使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件問題

    使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件問題

    這篇文章主要介紹了使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件,本文是小編給大家總結(jié)的一些表單插件的問題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-07
  • 一文了解Vue中的nextTick

    一文了解Vue中的nextTick

    Vue中的 nextTick 涉及到Vue中DOM的異步更新,感覺很有意思,特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識(shí),很多不太理解,暫且根據(jù)自己的一些感悟介紹下 nextTick
    2019-05-05
  • vue自動(dòng)路由-單頁(yè)面項(xiàng)目(非build時(shí)構(gòu)建)

    vue自動(dòng)路由-單頁(yè)面項(xiàng)目(非build時(shí)構(gòu)建)

    這篇文章主要介紹了vue自動(dòng)路由-單頁(yè)面項(xiàng)目(非build時(shí)構(gòu)建),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04
  • vue項(xiàng)目如何從session中獲取對(duì)象,并且使用里面的屬性

    vue項(xiàng)目如何從session中獲取對(duì)象,并且使用里面的屬性

    這篇文章主要介紹了vue項(xiàng)目如何從session中獲取對(duì)象,并且使用里面的屬性問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • Vue純前端實(shí)現(xiàn)導(dǎo)出Excel并修改樣式

    Vue純前端實(shí)現(xiàn)導(dǎo)出Excel并修改樣式

    這篇文章主要為大家詳細(xì)介紹了Vue如何利用xlsx-style庫(kù)實(shí)現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細(xì),有需要的可以參考下
    2024-01-01

最新評(píng)論