最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回)

 更新時(shí)間:2019年05月21日 14:29:50   作者:瀟湘羽西  
這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回) ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

之前寫(xiě)了一些關(guān)于element-ui表格合并的方法,不過(guò)用的數(shù)據(jù)都是確定的數(shù)據(jù)(死數(shù)據(jù)),但是很多時(shí)候我們的數(shù)據(jù)都是通過(guò)后臺(tái)獲得的,數(shù)據(jù)不穩(wěn)定,這個(gè)時(shí)候使用表格合并就需要先處理一下數(shù)據(jù),先看一下一種很常見(jiàn)的數(shù)據(jù)展示場(chǎng)景

直接上代碼,HTML代碼就不放了,都是差不多的,下面另一種場(chǎng)景有

// 模擬后臺(tái)返回的值
  getTable () {
   this.tableData = [{
    id: 1,
    region: '中國(guó)',
    type: [{
     sortName: '器械',
     sortList: [{
      name: '器械1'
     }, {
      name: '器械2'
     }]
    }, {
     sortName: '軟件',
     sortList: [{
      name: '軟件1'
     }, {
      name: '軟件2'
     }, {
      name: '軟件3'
     }]
    }]
   }, {
    id: 2,
    region: '美國(guó)',
    type: [{
     sortName: '器械',
     sortList: [{
      name: '器械1'
     }, {
      name: '器械2'
     }]
    }, {
     sortName: '軟件',
     sortList: [{
      name: '軟件1'
     }, {
      name: '軟件2'
     }]
    }]
   }]
   this.dealTable()
  },

  // 處理表格數(shù)據(jù)
  dealTable () {
   let getDate = [] // 存儲(chǔ)新表格數(shù)據(jù)
   let typeIndex = [0] // 保存id,地區(qū)需要合并的值
   let nameIndex = [0] // 保存類型需要合并的值
   let a // id,地區(qū)需要合并的行是所有類型的長(zhǎng)度
   this.tableData.forEach((v, index) => {
    if (v.type && v.type.length) {
     a = 0
     v.type.forEach((subV, i, typeData) => {
      if (subV.sortList && subV.sortList.length) {
       subV.sortList.forEach((ss, k, data) => {
        if (k === data.length - 1) {
         typeIndex.push(data.length) // 把每一個(gè)類型下面數(shù)據(jù)長(zhǎng)度存起來(lái)
         a += data.length // 把所有類型下面的數(shù)據(jù)長(zhǎng)度相加
         if (i === typeData.length - 1) {
          nameIndex.push(a) // 類型循環(huán)完成后把數(shù)據(jù)長(zhǎng)度存起來(lái)
         }
        }
        getDate.push({
         id: v.id,
         region: v.region,
         type: subV.sortName,
         name: ss.name
        })
       })
      }
     })
    }
   })

   console.log(nameIndex)
   // [0, 5, 4]
   // 看一下打印出來(lái)的規(guī)律,除去第一項(xiàng),5是第一次需要合并的行
   // 第二次合并又是從第五行開(kāi)始合并4行

   console.log(typeIndex)
   // [0, 2, 3, 2, 2]
   // 類型的數(shù)據(jù)存儲(chǔ)規(guī)律也是一樣,第一次合并2行
   // 第二次從2行開(kāi)始,合并3行,以此類推

   // 根據(jù)這個(gè)規(guī)則,只需要給數(shù)據(jù)加上兩個(gè)額外的屬性控制是否合并就OK
   let k = 0
   let t = 0
   nameIndex.forEach((v, i, nameArr) => {
    if (nameArr[i + 1]) {
     getDate[k].nameIndex = nameArr[i + 1]
     k += nameArr[i + 1]
    }
   })

   typeIndex.forEach((v, i, typeArr) => {
    if (typeArr[i + 1]) {
     getDate[t].typeIndex = typeArr[i + 1]
     t += typeArr[i + 1]
    }
   })
   this.tableData6 = getDate
   console.log(getDate)
   // 0: {id: 1, name: "器械1", nameIndex: 5, region: "中國(guó)", type: "器械", typeIndex: 2},
   // 1: {id: 1, name: "器械2", region: "中國(guó)", type: "器械"}
   // ....
   // 5: {id: 2, name: "器械1", nameIndex: 4, region: "美國(guó)", type: "器械", typeIndex: 2}
  },

  // 表格合并方法
  arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0 || columnIndex === 1) {
    if (row.nameIndex) { // 如果有值,說(shuō)明需要合并
     return [row.nameIndex, 1]
    } else return [0, 0]
   }
   if (columnIndex === 2) {
    if (row.typeIndex) {
     return [row.typeIndex, 1]
    } else return [0, 0]
   }
  },

再說(shuō)一下另一種場(chǎng)景,用的另一種方法實(shí)現(xiàn),原理都是大同小異

假設(shè)后臺(tái)返回的數(shù)據(jù)是這樣的:

在這種情況下,一般我們會(huì)選擇對(duì)行進(jìn)行合并,因?yàn)檫@時(shí)候表格的列是知道的,只要把需要合并的列提取出來(lái),合并行就OK,下面看代碼

<el-table
  :data="tableData6"
  :span-method="arraySpanMethod"
  border
  style="width: 100%">
  <el-table-column
   prop="id"
   label="ID"
   width="180">
  </el-table-column>
  <el-table-column
   prop="region"
   label="深圳">
  </el-table-column>
  <el-table-column
   prop="type"
   label="類型">
  </el-table-column>
  <el-table-column
   prop="company"
   label="企業(yè)名稱">
  </el-table-column>
 </el-table>

js代碼,首先需要處理一下后臺(tái)數(shù)據(jù)

getIndex () {
   let arr = []
   let s = 0
   let table = this.tableData6
   let getTable = []
   table.forEach((item, i, data) => {
    if (arr.length) {
     s = arr[arr.length - 1].row + data[i - 1].company.length
    }
    arr.push({
     row: s,
     index: item.company.length
    })
    if (item.company && item.company.length) {
     item.company.forEach(subItem => {
      getTable.push({
       id: item.id,
       region: item.region,
       type: item.type,
       company: subItem.name
      })
     })
    }
   })
   this.arr = arr
   this.tableData6 = getTable
  },

數(shù)據(jù)處理之后就進(jìn)行表格合并

// 合并表格方法
  arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    let obj = [0, 0]
    this.arr.some(v => {
     if (rowIndex === v.row) {
      obj = [v.index, 1]
     }
    })

    return obj
   }
  }

PS: 在這里說(shuō)一下樓主遇到的一個(gè)坑,其實(shí)也是因?yàn)閷?duì)函數(shù)的return不熟悉造成的,一開(kāi)始我是這樣寫(xiě)的,

結(jié)果頁(yè)面一直不對(duì),debugger了一下,發(fā)現(xiàn)函數(shù)中根本沒(méi)接收到return回去的數(shù)據(jù),這是因?yàn)槲襯eturn之后又寫(xiě)了代碼,函數(shù)真正結(jié)束時(shí)沒(méi)有返回值.所以在函數(shù)中,return之后就不要在寫(xiě)執(zhí)行代碼了.

正確的寫(xiě)法后debugger就能接收到正確的返回值了

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

相關(guān)文章

  • 解決element DateTimePicker+vue彈出框只顯示小時(shí)

    解決element DateTimePicker+vue彈出框只顯示小時(shí)

    這篇文章主要介紹了解決element DateTimePicker+vue彈出框只顯示小時(shí),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • vue自定義table表如何實(shí)現(xiàn)內(nèi)容上下循環(huán)滾動(dòng)

    vue自定義table表如何實(shí)現(xiàn)內(nèi)容上下循環(huán)滾動(dòng)

    這篇文章主要介紹了vue自定義table表如何實(shí)現(xiàn)內(nèi)容上下循環(huán)滾動(dòng)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue3父子組件間傳參通信的四種方式

    Vue3父子組件間傳參通信的四種方式

    近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2的并沒(méi)有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Vue3父子組件間傳參通信的四種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • 詳解Vue.js 作用域、slot用法(單個(gè)slot、具名slot)

    詳解Vue.js 作用域、slot用法(單個(gè)slot、具名slot)

    這篇文章主要介紹了Vue.js 作用域、slot用法(單個(gè)slot、具名slot),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-10-10
  • vue導(dǎo)出excel表格并支持樣式及行高修改

    vue導(dǎo)出excel表格并支持樣式及行高修改

    這篇文章主要為大家介紹了vue導(dǎo)出excel表格并支持樣式及行高修改,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vue之bus總線簡(jiǎn)單使用講解

    vue之bus總線簡(jiǎn)單使用講解

    這篇文章主要介紹了vue之bus總線簡(jiǎn)單使用講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • vue2.0在table中實(shí)現(xiàn)全選和反選的示例代碼

    vue2.0在table中實(shí)現(xiàn)全選和反選的示例代碼

    這篇文章主要介紹了vue2.0在table中實(shí)現(xiàn)全選和反選的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-11
  • 詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題

    詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題

    這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • vue3自定義動(dòng)態(tài)不同UI組件篩選框案例

    vue3自定義動(dòng)態(tài)不同UI組件篩選框案例

    動(dòng)態(tài)組件是一種在Vue中根據(jù)條件或用戶輸入來(lái)動(dòng)態(tài)渲染不同組件,本文主要介紹了vue3自定義動(dòng)態(tài)不同UI組件篩選框案例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2025-04-04
  • 使用Vue和React分別實(shí)現(xiàn)錨點(diǎn)定位功能

    使用Vue和React分別實(shí)現(xiàn)錨點(diǎn)定位功能

    這篇文章主要為大家詳細(xì)介紹了如何使用Vue和React分別實(shí)現(xiàn)錨點(diǎn)定位功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以學(xué)習(xí)一下
    2024-01-01

最新評(píng)論

镇康县| 峨眉山市| 苗栗市| 乐都县| 荣成市| 翼城县| 修水县| 民乐县| 启东市| 社旗县| 冕宁县| 白玉县| 金塔县| 都匀市| 红原县| 大足县| 息烽县| 水富县| 晴隆县| 道孚县| 应城市| 东明县| 南丹县| 莱芜市| 咸宁市| 云梦县| 宝清县| 亳州市| 承德县| 武强县| 清徐县| 正安县| 义马市| 西乌珠穆沁旗| 乌苏市| 丹东市| 刚察县| 湘乡市| 营口市| 汉寿县| 漾濞|