Vue + Element UI （table） 合并行

有一个展示内容的表格，会有合并行的需求，应用了Element UI 的table。

Element UI 提供了如下的方法，能够实现跨行

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

=== Element UI ===
<el-table :data="tableData" :span-method="objectSpanMethod" border style=" 100%; margin-top: 20px"> 

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {   //当行rowIndex % 2 === 0 的时候 实现跨行
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }

现在后端返回的数据是一个数组：

最终实现的效果：

也就是根据category返回值的不同，第一列跨行数也不一样。

分析：第一列跨的行数，正是每个category的数目长度。跨行的rowIndex开始值可以是遍历数组当每个category一组的开始的第一个index值。

所以

1. 遍历后端返回的数组每一项，利用数组的findIndex 方法，可以找到第一次就满足条件的Index，即为开始的rowIndex.

2. 遍历得到每一个category 所对应的具体的长度。即为跨几行

 

// 获取到后端数据
getDataList () {
      if (!this.dataListLoading) {
        this.dataListLoading = true;
        this.$http.get(`接口url`)
        .then((data) => {
          if (data.code === 0) {
            this.dataList = data.data || []
       
            // 获取每个类目下的条数
            let arr = []
            // let indexList = []
            this.dataList.forEach(ele => {
              let firstIndex = this.dataList.findIndex(item => {
                  return item.category === ele.category   // 当category相同的时候，返回第一个相同的Index 赋值给 firstIndex
                })
              if (arr.findIndex(item => {
                return item.firstIndex === firstIndex
              }) === -1) {
                arr.push({
                  length: this.dataList.filter(item => {
                    return item.category === ele.category    //利用数组的filter方法，过滤出相同category的数组的长度。数组长度-即为跨多少行
                  }).length,
                  firstIndex: firstIndex    // firstIndex 返回的是第一个catergory就满足的第一个Index,即为rowIndex开始于第几行。
                })
              }
            })
            // arr = new Set(arr)
            // console.log(arr)
            this.indexInfoList = arr   // 得到的arr里面的内容：Array(3) // 0 : firstIndex : 0; length: 4  1: firstIndex: 4 length:5
            console.log(arr)   
          } else {
            this.$message.error(data.msg || '查询失败')
            this.dataList = []
            this.indexInfoList = []
          }
        })
        .catch(e => {
          this.dataList = []
          this.indexInfoList = []
        })
        .finally(() => {
          this.dataListLoading = false;
        });
      }
    },

   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let index = this.indexInfoList.findIndex(item => {  //遍历数组
          return item.firstIndex === rowIndex
        })
        if (index > -1) {
          return {
            rowspan: this.indexInfoList[index].length,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }

如果element ui 合并列之后 单元格内容错位，

最重要的是把合并列之后的几列给隐藏掉

return {

            rowspan: 0,

            colspan: 0,

      };

 

感谢原文作者提供的帮助：

小兔子~艾米粒

https://www.cnblogs.com/rabbit-lin0903/p/12047963.html