详解关于表格合并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更改class和id的方法
Oct 10 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
vue引用外部JS的两种种方法
Jan 28 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
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
JS设计模式之责任链模式实例详解
2018/02/03 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
Django实现简单的分页功能
2021/02/22 Python
早餐连锁店计划书
2014/01/08 职场文书
乔迁之喜主持词
2014/03/27 职场文书
项目负责人任命书
2014/06/04 职场文书
学校创先争优活动总结
2014/08/28 职场文书
参观邀请函范文
2015/02/02 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
学校运动会通讯稿
2015/07/18 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js