标签：rowspan return 表格 elementUI 单元格 rowSpanField number key data

效果

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.rowSpanField.indexOf(column.property) > -1) {
        return {
          rowspan: row["rowspan" + column.property],
          colspan: 1
        };
      }
    },
    setrowspans() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.tableData.forEach(v => {
        this.rowSpanField.forEach(key => {
          v["rowspan" + key] = 0;
        });
      });

      this.rowSpanField.forEach(key => {
        let sort = 0;
        for (let i = 0; i < this.tableData.length; i++) {
          sort = this.getRepeatNumber(i, this.tableData, key, 1);
          this.tableData[i]["rowspan" + key] = sort;
          i = i + sort - 1;
        }
      });
    },
    /**
     *
     * @param {*} i 数组当前位置
     * @param {*} data 要搜索的数组
     * @param {*} key 数组对象中搜索的字段
     * @param {*} number 返回连续长度
     * @returns 根据数组对象中位置，某个属性字段得到当前这个字段连续重复出现的次数
     */
    getRepeatNumber(i, data, key, number = 0) {
      let j = i + 1 < data.length ? i + 1 : data.length - 1;
      if (data[i][key] == data[j][key]) {
        number++;
        if (j >= data.length - 1) {
          return number;
        } else {
          return this.getRepeatNumber(j, data, key, number);
        }
      }
      return number;
    }

 
computed：


rowSpanField() {
      switch (Number(this.method)) {
        case 0:
          return ["organizationName", "dataType"];
        case 1:
          return ["dataType", "resolution"];
        case 2:
          return ["resolution", "dataType"];
      }
    }



html：
 <el-table :span-method="arraySpanMethod"></el-table >

　在获取到tabledata数据后调用一下

setrowspans方法就可以了

标签：rowspan,return,表格,elementUI,单元格,rowSpanField,number,key,data
来源： https://www.cnblogs.com/zhupanpan/p/16693170.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。