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

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

直接上代码,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]
   }
  },

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

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

在这种情况下,一般我们会选择对行进行合并,因为这时候表格的列是知道的,只要把需要合并的列提取出来,合并行就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代码,首先需要处理一下后台数据

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不熟悉造成的,一开始我是这样写的,

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。