详解关于表格合并span-method方法的补充(表格数据由后台动态返回)


Posted in Javascript onMay 21, 2019

之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很多时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很常见的数据展示场景

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

直接上代码,HTML代码就不放了,都是差不多的,下面另一种场景有

// 模拟后台返回的值
  getTable () {
   this.tableData = [{
    id: 1,
    region: '中国',
    type: [{
     sortName: '器械',
     sortList: [{
      name: '器械1'
     }, {
      name: '器械2'
     }]
    }, {
     sortName: '软件',
     sortList: [{
      name: '软件1'
     }, {
      name: '软件2'
     }, {
      name: '软件3'
     }]
    }]
   }, {
    id: 2,
    region: '美国',
    type: [{
     sortName: '器械',
     sortList: [{
      name: '器械1'
     }, {
      name: '器械2'
     }]
    }, {
     sortName: '软件',
     sortList: [{
      name: '软件1'
     }, {
      name: '软件2'
     }]
    }]
   }]
   this.dealTable()
  },

  // 处理表格数据
  dealTable () {
   let getDate = [] // 存储新表格数据
   let typeIndex = [0] // 保存id,地区需要合并的值
   let nameIndex = [0] // 保存类型需要合并的值
   let a // id,地区需要合并的行是所有类型的长度
   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) // 把每一个类型下面数据长度存起来
         a += data.length // 把所有类型下面的数据长度相加
         if (i === typeData.length - 1) {
          nameIndex.push(a) // 类型循环完成后把数据长度存起来
         }
        }
        getDate.push({
         id: v.id,
         region: v.region,
         type: subV.sortName,
         name: ss.name
        })
       })
      }
     })
    }
   })

   console.log(nameIndex)
   // [0, 5, 4]
   // 看一下打印出来的规律,除去第一项,5是第一次需要合并的行
   // 第二次合并又是从第五行开始合并4行

   console.log(typeIndex)
   // [0, 2, 3, 2, 2]
   // 类型的数据存储规律也是一样,第一次合并2行
   // 第二次从2行开始,合并3行,以此类推

   // 根据这个规则,只需要给数据加上两个额外的属性控制是否合并就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: "中国", type: "器械", typeIndex: 2},
   // 1: {id: 1, name: "器械2", region: "中国", type: "器械"}
   // ....
   // 5: {id: 2, name: "器械1", nameIndex: 4, region: "美国", type: "器械", typeIndex: 2}
  },

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

再说一下另一种场景,用的另一种方法实现,原理都是大同小异

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

假设后台返回的数据是这样的:

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

在这种情况下,一般我们会选择对行进行合并,因为这时候表格的列是知道的,只要把需要合并的列提取出来,合并行就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="企业名称">
  </el-table-column>
 </el-table>

js代码,首先需要处理一下后台数据

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

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
  },

数据处理之后就进行表格合并

// 合并表格方法
  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: 在这里说一下楼主遇到的一个坑,其实也是因为对函数的return不熟悉造成的,一开始我是这样写的,

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

结果页面一直不对,debugger了一下,发现函数中根本没接收到return回去的数据,这是因为我return之后又写了代码,函数真正结束时没有返回值.所以在函数中,return之后就不要在写执行代码了.

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

正确的写法后debugger就能接收到正确的返回值了

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈Javascript事件模拟
Jun 27 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
浅谈React Native 传参的几种方式(小结)
May 21 #Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 #Javascript
JS判断数组里是否有重复元素的方法小结
May 21 #Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 #Javascript
vue路由守卫+登录态管理实例分析
May 21 #Javascript
vue实现跨域的方法分析
May 21 #Javascript
vue动态绑定class的几种常用方式小结
May 21 #Javascript
You might like
基于mysql的论坛(5)
2006/10/09 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
js 作用域和变量详解
2017/02/16 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
vue-router 控制路由权限的实现
2020/09/24 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
pandas 条件搜索返回列表的方法
2018/10/30 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
python轮询机制控制led实例
2020/05/03 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
PHP面试题及答案一
2012/06/18 面试题
外贸英语专业求职信范文
2013/12/25 职场文书
中国央视网签名寄语
2014/01/18 职场文书
酒店管理求职信范文
2014/04/06 职场文书
小学安全汇报材料
2014/08/14 职场文书
2014年营销工作总结
2014/11/22 职场文书
员工福利申请报告
2015/05/15 职场文书
2015中学教学工作总结
2015/07/22 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python