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

Vue Elenent實(shí)現(xiàn)表格相同數(shù)據(jù)列合并

 更新時(shí)間:2020年11月30日 15:17:26   作者:Qiu_MT  
這篇文章主要為大家詳細(xì)介紹了Vue Elenent實(shí)現(xiàn)表格相同數(shù)據(jù)列合并,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue Elenent實(shí)現(xiàn)表格相同數(shù)據(jù)列合并的具體代碼,供大家參考,具體內(nèi)容如下

作者:秋名

思路:后臺(tái)查詢表格數(shù)據(jù),查詢出來后直接傳到前端,前端通過foreach循環(huán),然后對(duì)相同的表格進(jìn)行合并。(同一個(gè)表格,但是每一行,固定一列的數(shù)據(jù)都相同,即可使用合并單元格,做到了既美觀,也清晰。)

template:

<el-table
 :span-method="objectSpanMethod4" //在el-table里面添加合并單元格屬性
 >

Js:

data(){
return{
 orderdata:null,// 后端將數(shù)據(jù)查詢出來后,綁定到orderdata里面
}
},
 methods: {
flitterData4(){
  let spanOneArr = []
  let concatOne = 0
  //let spanOneArr1 = []
  //let concatOne1 = 0
  this.orderdata.forEach((item,index)=>{//循環(huán)后端查詢出來的數(shù)據(jù)(orderdata)
  if(index === 0){
   spanOneArr.push(1)
  }else{
   //name 修改
   if(item.ENTERNAME === this.orderdata[index - 1].ENTERNAME){ //第一列需合并相同內(nèi)容的字段
   spanOneArr[concatOne] += 1
   spanOneArr.push(0)
   }else{
   spanOneArr.push(1)
   concatOne = index
   }
   //if(item.coachName === this.coachdata[index - 1].coachName){ //第二列需合并相同內(nèi)容的判斷條件
   //spanOneArr1[concatOne1] += 1
   //spanOneArr1.push(0)
   //}else{
   //spanOneArr1.push(1)
   //concatOne1 = index
   // }
  }
  })
  return {
  one: spanOneArr,
  //two:spanOneArr1
  }
 },
 objectSpanMethod4({row, column, rowIndex, columnIndex}){
  if(columnIndex === 0 ) {
  // this.tableData 修改
  const _row = (this.flitterData4(this.tableData).one)[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
   rowspan: _row,
   colspan: _col
  }
  }
  //判斷是否是第二列,如果是就將第二列相同字段進(jìn)行合并
  //if(columnIndex === 1) {
  // const _row = (this.flitterData(this.tableData).two)[rowIndex]
  // const _col = _row > 0 ? 1 : 0
  // return {
   // rowspan: _row,
  // colspan: _col
  // }
  }
 },
 }

效果圖:

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

相關(guān)文章

  • 使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問題

    使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問題

    這篇文章主要介紹了使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue中的proxyTable反向代理(親測(cè)有用)

    vue中的proxyTable反向代理(親測(cè)有用)

    這篇文章主要介紹了vue中的proxyTable反向代理(親測(cè)有用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue的Eslint配置文件eslintrc.js說明與規(guī)則介紹

    Vue的Eslint配置文件eslintrc.js說明與規(guī)則介紹

    最近在跟著視頻敲項(xiàng)目時(shí),代碼提示出現(xiàn)很多奇奇怪怪的錯(cuò)誤提示,百度了一下是eslintrc.js文件沒有配置相關(guān)命令,ESlint的語法檢測(cè)真的令人抓狂,現(xiàn)在總結(jié)一下這些命令的解釋
    2020-02-02
  • Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁和排序效果

    Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁和排序效果

    這篇文章主要為大家詳細(xì)介紹了Vue.js結(jié)合bootstrap 前端實(shí)現(xiàn)分頁和排序效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • vue中過濾器filter的講解

    vue中過濾器filter的講解

    今天小編就為大家分享一篇關(guān)于vue中過濾器filter的講解,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • Vue仿百度搜索功能

    Vue仿百度搜索功能

    這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)

    Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)

    Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • vue組件之全局注冊(cè)和局部注冊(cè)方式

    vue組件之全局注冊(cè)和局部注冊(cè)方式

    這篇文章主要介紹了vue組件之全局注冊(cè)和局部注冊(cè)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue:內(nèi)存泄露詳解

    vue:內(nèi)存泄露詳解

    這篇文章主要介紹了一個(gè)Vue的內(nèi)存泄露詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2021-10-10
  • vue3中使用codemirror的詳細(xì)教程

    vue3中使用codemirror的詳細(xì)教程

    這篇文章主要給大家介紹了關(guān)于vue3中使用codemirror的詳細(xì)教程,CodeMirror是一款功能強(qiáng)大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進(jìn)、自動(dòng)換行、獲取編輯文本、設(shè)置編輯文本、回退功能等多種實(shí)用效果,需要的朋友可以參考下
    2023-09-09

最新評(píng)論