详解关于表格合并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 相关文章推荐
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
jquery遍历json对象集合详解
May 18 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
基于form-data请求格式详解
Oct 29 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
php限制文件下载速度的代码
2015/10/20 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
python实现线程池的方法
2015/06/30 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
使用Python对MySQL数据操作
2017/04/06 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
毕业生求职的求职信
2013/12/05 职场文书
前台文员岗位职责
2013/12/28 职场文书
学习党课思想汇报
2013/12/29 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
永不妥协观后感
2015/06/10 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Nginx配置https的实现
2021/11/27 Servers