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

elementUI table表格動態(tài)合并的示例代碼

 更新時(shí)間:2019年05月15日 14:23:25   作者:enjoyLife  
這篇文章主要介紹了elementUI table表格動態(tài)合并的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.最近在做的erp項(xiàng)目,有一個需求是同一個客戶下的同種訂單,需要合并展示。使用elementUI table組件的方法 :span-method="objectSpanMethod"。官網(wǎng)上看了一下demo,做的很直白,不過不太符合業(yè)務(wù)。在網(wǎng)上找了篇文章參考了一下

2.效果圖如下:


在動態(tài)處理從后端拿回來的數(shù)據(jù)的時(shí)候,是需要從數(shù)據(jù)中找到一個唯一的“標(biāo)識”去判斷是否是相同種類的數(shù)據(jù)。然后根據(jù)這個“標(biāo)識”去做邏輯判斷。

3.代碼:

//合并單元格 二維數(shù)組-> 根據(jù)“標(biāo)識”去遍歷數(shù)據(jù)
data() {

return {
  spanArr: [], //遍歷數(shù)據(jù)時(shí),根據(jù)相同的標(biāo)識去存儲記錄
  pos: 0 // 二維數(shù)組的索引
}
}
// methods中定義方法
getSpanArr(data) {

let that = this
//頁面展示的數(shù)據(jù),不一定是全部的數(shù)據(jù),所以每次都清空之前存儲的 保證遍歷的數(shù)據(jù)是最新的數(shù)據(jù)。以免造成數(shù)據(jù)渲染混亂
that.spanArr = []
that.pos = 0
//遍歷數(shù)據(jù)
data.forEach((item, index) => {
  //判斷是否是第一項(xiàng)
  if (index === 0) {
    this.spanArr.push(1)
    this.pos = 0
  } else {
    //不是第一項(xiàng)時(shí),就根據(jù)標(biāo)識去存儲
    if (data[index].moldName === data[index - 1].moldName) {
      // 查找到符合條件的數(shù)據(jù)時(shí)每次要把之前存儲的數(shù)據(jù)+1
      this.spanArr[this.pos] += 1
      this.spanArr.push(0)
    } else {
      // 沒有符合的數(shù)據(jù)時(shí),要記住當(dāng)前的index
      this.spanArr.push(1)
      this.pos = index
    }
  }
 })
console.log(this.spanArr, this.pos)
},
// 列表方法
objectSpanMethod({rowIndex, columnIndex}) {

// 頁面列表上 表格合并行 -> 第幾列(從0開始)
// 需要合并多個單元格時(shí) 依次增加判斷條件即可
if (columnIndex === 3) {
  // 二維數(shù)組存儲的數(shù)據(jù) 取出
  const _row = this.spanArr[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
    rowspan: _row,
    colspan: _col
  }
  //不可以return {rowspan:0, colspan: 0} 會造成數(shù)據(jù)不渲染, 也可以不寫else,eslint過不了的話就返回false
} else {
  return false
}
}
created() {

let data = xxxxxxxxx
this.getSpanArr(data)
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法

    vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法

    這篇文章主要介紹了vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)

    vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)

    這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • WebStorm啟動vue項(xiàng)目報(bào)錯代碼:1080?throw?err解決辦法

    WebStorm啟動vue項(xiàng)目報(bào)錯代碼:1080?throw?err解決辦法

    在使用webstorm新建vue項(xiàng)目時(shí)常會遇到一些報(bào)錯,下面這篇文章主要給大家介紹了關(guān)于WebStorm啟動vue項(xiàng)目報(bào)錯代碼:1080?throw?err的解決辦法,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • 面試官問你Vue2的響應(yīng)式原理該如何回答?

    面試官問你Vue2的響應(yīng)式原理該如何回答?

    可能很多小伙伴之前都了解過?Vue2實(shí)現(xiàn)響應(yīng)式的核心是利用了ES5的Object.defineProperty?但是面對面試官時(shí)如果只知道一些模糊的概念。只有深入底層了解響應(yīng)式的原理,才能在關(guān)鍵時(shí)刻對答如流,本文就來和大家詳細(xì)聊聊,感興趣的可以收藏一下
    2022-12-12
  • Vue2中的過濾器filter使用及注意說明

    Vue2中的過濾器filter使用及注意說明

    這篇文章主要介紹了Vue2中的過濾器filter使用及注意說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue實(shí)現(xiàn)集成騰訊TIM即時(shí)通訊

    vue實(shí)現(xiàn)集成騰訊TIM即時(shí)通訊

    最近在做商城類的項(xiàng)目,需要使用到客服系統(tǒng),用戶選擇的騰訊IM即時(shí)通信,所以本文主要介紹了vue實(shí)現(xiàn)集成騰訊TIM即時(shí)通訊,感興趣的可以了解一下
    2021-06-06
  • 解決Vue中 父子傳值 數(shù)據(jù)丟失問題

    解決Vue中 父子傳值 數(shù)據(jù)丟失問題

    這篇文章主要介紹了解決Vue中 父子傳值 數(shù)據(jù)丟失問題,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法

    Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法

    這篇文章主要介紹了Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08
  • Vue 使用html、css實(shí)現(xiàn)魚骨組件圖

    Vue 使用html、css實(shí)現(xiàn)魚骨組件圖

    這篇文章主要介紹了Vue 使用html、css實(shí)現(xiàn)魚骨組件圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • Vue3中pinia用法示例

    Vue3中pinia用法示例

    這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07

最新評論