详解关于表格合并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面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
浅谈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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP四大安全策略
2014/03/12 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
js实现登录与注册界面
2017/11/01 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
Python全局变量用法实例分析
2016/07/19 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
vue常用指令代码实例总结
2020/03/16 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
入股协议书
2014/04/14 职场文书
校园演讲稿汇总
2014/05/21 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
授权委托书样本
2014/09/25 职场文书
政协常委会议主持词
2015/07/03 职场文书