el-table的行合并

1.在el-table标签里添加:span-method=“objectSpanMethod” 这个方法
data数据里加上这个数组spanArr:[]

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示, [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
      }
  }
  },

查询的接口返回数据显示

    //根据申报id查询专家大项评分
    getZscqzjpfinfo() {
      var id = this.infoId || this.id;
      if (id) {
        zscqsb.getZscqzjpfinfo(id).then((res) => {
            if (res.code == "200") {
              this.tableData=res.data
                  for (var i = 0; i < res.data.length; i++) {
                    if (i === 0) {
                      this.spanArr.push(1);
                      this.pos = 0;
                    } else {
                      // 判断当前元素与上一个元素是否相同
                      if (res.data[i].code === res.data[i - 1].code) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                      } else {
                        this.spanArr.push(1);
                        this.pos = i;
                      }
                    }
                  }
            }
          }).catch((res) => {
            this.$message.error(res.msg);
          });
      }
    },

你可能感兴趣的:(vue.js,javascript,前端)