VUE动态合并单元格

使用:span-method绑定合并单元格的算法

在data中定义该数组

    getSlectList (v) {//获取table数据
      // 这个是如果要合并的字段行间隔隔开几行可以使用排序 
      // 但是我这边没有隔开且点击后面添加删除时会将行数不稳定
      // v = v.sort(//一级指标排序
      //   function (a, b) {
      //     if (a.first === b.first) return -1;//交换位置
      //     if (a.first !== b.first) return 1;//不交换位置
      //     return 0;
      //   }
      // );
      // v = v.sort(//二级指标排序
      //   function (a, b) {
      //     if (a.second === b.second) return -1;//交换位置
      //     if (a.second !== b.second) return 1;//不交换位置
      //     return 0;
      //   }
      // );

      this.getSpanArr(v)//操作数据，标记哪些行需要合并
    },
    getSpanArr (data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.firstArr.push(1);
          this.firstPos = 0
          this.secondArr.push(1);
          this.secondPos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          // 将firstArr[]赋值合并
          if (data[i].first === data[i - 1].first) {
            this.firstArr[this.firstPos] += 1;
            this.firstArr.push(0);
          } else {
            this.firstArr.push(1);
            this.firstPos = i;
          }
          // secondArr[]赋值合并
          if (data[i].second === data[i - 1].second) {
            this.secondArr[this.secondPos] += 1;
            this.secondArr.push(0);
          } else {
            this.secondArr.push(1);
            this.secondPos = i;
          }
        }
      }
    },

	// :span-method="cellMerge" 绑定该表格合并计算算法
    cellMerge ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2 && this.firstArr.length !== 0) {
        const _row = this.firstArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 3 && this.secondArr.length !== 0) {
        const _row = this.secondArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getDataList () {
      this.loading = true;
      // 带多条件搜索参数获取表单数据 请自行修改接口
      this.getRequest("/performance/get/" + this.form.proId).then(res => {
        this.loading = false;
        this.formArrs = res;
        if (res.success && res.result) {
          this.form = res.result;
          if (res.result.indexList.length > 0) { // 如果集合的长度大于0就代表有
            this.tableData = res.result.indexList;
            this.tableArrs = this.tableData
            this.getSlectList(this.tableArrs);
          } else {
            this.getSlectList(this.tableData);
          }
        } else if (res.success) { // 如果集合中没有数据 我这边一开始有默认的tableData数据
          this.getSlectList(this.tableData);
        }
      });
    },

tableData: [{ "first": "产出", "second": "数量指标", "third": "", "thirdValue": "", "remark": "" }, { "first": "产出", "second": "成本指标", "third": "", "thirdValue": "", "remark": "" }, { "first": "产出", "second": "质量指标", "third": "", "thirdValue": "", "remark": "" }, { "first": "产出", "second": "时效指标", "third": "", "thirdValue": "", "remark": "" }, { "first": "效益", "second": "经济效益指标", "third": "", "thirdValue": "", "remark": "" }, { "first": "效益", "second": "社会效益指标", "third": "", "thirdValue": "", "remark": "" }, { "first": "效益", "second": "生态效益指标", "third": "", "thirdValue": "", "remark": "" }, { "first": "效益", "second": "可持续影响指标", "third": "", "thirdValue": "", "remark": "" }, { "first": "满意度", "second": "服务对象满意度指标", "third": "", "thirdValue": "", "remark": "" }],

这是我一开始的默认tableData数据

render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "default",
                    size: "small",
                    icon: "ios-add-circle-outline" // 添加icon图标
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      var tempObj = JSON.parse(JSON.stringify(params.row));
                      tempObj.id = Number(Math.random().toString().substr(3, 16) + Date.now()).toString(36);
                      tempObj.third = "";
                      tempObj.thirdValue = "";
                      tempObj.remark = "";
                      // 先将一级二级指标的数组数据清空 然后再下面重新赋值
                      this.firstArr = [];
                      this.secondArr = [];
                      // 用formArrs获取了后端接口返回的数据
                      if (this.formArrs.result !== null) {
                        // 如果formArrs有数据 且该下面的表格集合长度大于0
                        if (this.formArrs.result.indexList > 0) {
                          // 将tableData重新赋值然后传入到this.getSlectList 否则直接调用默认的tableData赋值
                          this.tableData = this.formArrs.result.indexList;
                          this.tableData.splice(params.row._index + 1, 0, tempObj);
                          this.tableArrs = this.tableData
                          this.getSlectList(this.tableArrs);
                        } else {
                          this.tableData.splice(params.row._index + 1, 0, tempObj);
                          this.getSlectList(this.tableData);
                        }
                      }
                      else {
                        this.tableData.splice(params.row._index + 1, 0, tempObj);
                        this.getSlectList(this.tableData);
                      }
                    }
                  }
                },
                ""
              ),
                 h(
                "Button",
                {
                  props: {
                    type: "del",
                    size: "small",
                    icon: "ios-backspace-outline" // 删除icon图标
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      this.firstArr = [];
                      this.secondArr = [];
                      if (this.formArrs.result !== null) {
                        if (this.formArrs.result.indexList > 0) {
                          this.tableData = this.formArrs.result.indexList;
                          this.tableData.splice(params.row._index, 1);
                          this.tableArrs = this.tableData
                          this.getSlectList(this.tableArrs);
                        } else {
                          this.tableData.splice(params.row._index, 1);
                          this.getSlectList(this.tableData);
                        }
                      }
                      else {
                        this.tableData.splice(params.row._index, 1);
                        this.getSlectList(this.tableData);
                      }
                    }
                  }
                },
                ""
              )
            ]);
          }

以上是对行数进行操作时的按钮