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

ant-design-vue動態(tài)表格合并案例

 更新時(shí)間:2022年08月17日 08:42:20   作者:西嵐???????  
這篇文章主要介紹了ant-design-vue動態(tài)表格合并案例,文章圍繞主題通過案例詳解展開相關(guān)內(nèi)容,具有一定的參考價(jià)值,需要的小伙伴可以參考一下

前言

最近接到一個(gè)需求,要把后端傳過來的數(shù)據(jù)動態(tài)展示在表格上面,并且支持前端篩選,相同數(shù)據(jù)進(jìn)行單元格合并,

最終實(shí)現(xiàn)的效果如下:

數(shù)據(jù)格式

后端會返回給我們一個(gè)數(shù)組,數(shù)組的每一項(xiàng)格式是這樣,在這個(gè)需求里,我們需要對 title,department,bugType 這三個(gè)字段相同的值的單元格進(jìn)行合并

 {
          fixCount: 0,
          id: 0,
          codeType: '新代碼',
          bugType: 'ui展示問題',
          notFixedCount: 0,
          todayAdd: 0,
          totalCount: 0,
          title: 'bug總覽',
          department: '開發(fā)一部'
        },

ant-desgin-vue表格提供的api

ant-desigin-vue的table組件提供一個(gè)自定義渲染單元格的方法customRender,接收兩個(gè)參數(shù),一個(gè)text當(dāng)前值,row當(dāng)前行,我們可以根據(jù)我們業(yè)務(wù)需求對它進(jìn)行操作,然后把它return 出去就能得到想要的效果

表格支持行/列合并,使用 render 里的單元格屬性 colSpan 或者 rowSpan 設(shè)值為 0 時(shí),設(shè)置的表格不會渲染。

具體可以看下這個(gè)鏈接 

所以先定義columns也就是表頭格式

    columns: [
        {
          title: '',
          dataIndex: 'title',
          width: 120,
          customRender: (text, row) => {
            return {
              children: `${text}`,
              attrs: {
                rowSpan: row.titleRowSpan
              }
            }
          }
        },
        {
          title: '部門',
          dataIndex: 'department',
          width: 120,
          customRender: (text, row, index) => {
            return {
              children: `${text}`,
              attrs: {
                rowSpan: row.departmentRowSpan
              }
            }
          }
        },
        {
          title: '代碼類型',
          dataIndex: 'codeType',
          width: 120
        },
        {
          title: '總數(shù)',
          dataIndex: 'totalCount',
          width: 120
        },
        {
          title: '修復(fù)',
          dataIndex: 'fixCount',
          width: 120
        },
        {
          title: '未修復(fù)',
          dataIndex: 'notFixedCount',
          width: 120
        },
        {
          title: '今日新增',
          dataIndex: 'todayAdd',
          width: 120
        },
        {
          title: 'Bug類型',
          dataIndex: 'bugType',
          width: 120,
          customRender: (text, row, index) => {
            return {
              children: `${text}`,
              attrs: {
                rowSpan: row.bugTypeRowSpan
              }
            }
          }
        }
      ],

合并單元格算法實(shí)現(xiàn)

說下思路:

其實(shí)就是類似于雙指針的思想:

  • 需要兩次循環(huán),第一次循環(huán)i,作為合并單元格后的起始點(diǎn),
  • 第二次循環(huán)j是從起始點(diǎn)找下一個(gè)值是否是相同的值,如果相同則合并單元格,合并的數(shù)量就是count,然后把本次循環(huán)相同值的最后一個(gè)序號保存下來,第一次循環(huán)就從這個(gè)序號開始繼續(xù)跑

具體代碼實(shí)現(xiàn)如下:

//  合并單元格
    combineRow(key) {
      const tableData = this.tableData
      for (var i = 0; i < tableData.length; i++) {
        const item = tableData[i]
        let count = 1
        for (let j = i + 1; j < tableData.length; j++) {
          // 如果是同一個(gè)值,往后遞增
          if (item[key] === tableData[j][key]) {
            count++
            // 往后相同的值都設(shè)為空單元格
            tableData[j][`${key}RowSpan`] = 0
            // 只有同值第一個(gè)才設(shè)置合并的單元格數(shù)
            item[`${key}RowSpan`] = count
            // 所有都是為同一個(gè)值的情況
            // 如果到了尾部,則循環(huán)結(jié)束
            if (j === tableData.length - 1) {
                return
            }
          } else {
            // 指針跳轉(zhuǎn)到下一個(gè),從下一排開始
            i = j - 1
            count = 1
            tableData[j][`${key}RowSpan`] = 0
            break
          }
        }
      }
      this.tableData = tableData
    }

然后我們在created中調(diào)用

  created() {
    this.combineRow('title') // 合并title
    this.combineRow('department') // 合并部門
    this.combineRow('bugType') // 合并bug類型
  }

至于過濾的效果,就不贅述了,很簡單,往鍵盤上撒把米雞都能給你敲出來,看下面代碼就知道

效果展示

其實(shí)這個(gè)需求麻煩在于數(shù)據(jù)轉(zhuǎn)換上,那會兒后端給的數(shù)據(jù)太難處理了,非得讓我搞個(gè)矩陣才能處理,相比之下合并單元格其實(shí)也還好,沒那么難實(shí)現(xiàn)。

到此這篇關(guān)于ant-design-vue動態(tài)表格合并案例的文章就介紹到這了,更多相關(guān)vue表格合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue組件創(chuàng)建和傳值的方法

    Vue組件創(chuàng)建和傳值的方法

    這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法,創(chuàng)建組件有三種方法,文中給大家介紹的非常詳細(xì),父組件傳值給子組件的方法,給大家介紹的也非常詳細(xì),需要的朋友參考下吧
    2018-08-08
  • Vue開發(fā)中常見的套路和技巧總結(jié)

    Vue開發(fā)中常見的套路和技巧總結(jié)

    這篇文章主要給大家介紹了關(guān)于Vue開發(fā)中常見的套路和技巧的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • Monorepo風(fēng)格的組件工程搭建示例詳解

    Monorepo風(fēng)格的組件工程搭建示例詳解

    這篇文章主要介紹了Monorepo風(fēng)格的組件工程搭建示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • vue可拖拽的瀑布流布局組件實(shí)現(xiàn)詳解

    vue可拖拽的瀑布流布局組件實(shí)現(xiàn)詳解

    這篇文章主要為大家介紹了vue的可拖拽的瀑布流布局組件有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼

    Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼

    這篇文章主要介紹了Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue前端實(shí)現(xiàn)驗(yàn)證碼登錄功能

    vue前端實(shí)現(xiàn)驗(yàn)證碼登錄功能

    這篇文章主要介紹了vue前端實(shí)現(xiàn)驗(yàn)證碼登錄功能,登錄時(shí)圖形驗(yàn)證通過三種方法結(jié)合實(shí)例代碼給大家講解的非常詳細(xì), 通過實(shí)例代碼介紹了vue登錄時(shí)圖形驗(yàn)證碼功能的實(shí)現(xiàn),感興趣的朋友一起看看吧
    2023-12-12
  • layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決

    layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決

    這篇文章主要介紹了layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue點(diǎn)擊彈窗自動觸發(fā)點(diǎn)擊事件的解決辦法(模擬場景)

    vue點(diǎn)擊彈窗自動觸發(fā)點(diǎn)擊事件的解決辦法(模擬場景)

    本文通過案例場景給大家介紹vue點(diǎn)擊彈窗自動觸發(fā)點(diǎn)擊事件的解決辦法,通過兩種方法給大家分享vue 自動觸發(fā)點(diǎn)擊事件的處理方法,對vue自動觸發(fā)點(diǎn)擊事件相關(guān)知識感興趣的朋友一起看看吧
    2021-05-05
  • vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D

    vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D

    這篇文章主要介紹了vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue動態(tài)生成el-checkbox點(diǎn)擊無法賦值的解決方法

    Vue動態(tài)生成el-checkbox點(diǎn)擊無法賦值的解決方法

    這篇文章主要給大家介紹了關(guān)于Vue動態(tài)生成el-checkbox點(diǎn)擊無法賦值的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-02-02

最新評論