合并Element ui单元格

这个方法是处理后台拿过来的数据

getSpanArr(data) {
      // data就是我们从后台拿到的数据
      this.spanArr = [];
      let that = this;
      setTimeout(function () {
        // console.log(data.length);
        for (var i = 0; i < data.length; i++) {
          // console.log(data[i].category_id);
          if (i === 0) {
            that.spanArr.push(1);
            this.pos = 0;
          } else {
            // 判断当前元素与上一个元素是否相同

            if (data[i].category_id === data[i - 1].category_id) {
              that.spanArr[this.pos] += 1;
              that.spanArr.push(0);
            } else {
              that.spanArr.push(1);
              this.pos = i;
            }
          }
        }
        console.log(that.spanArr);
      }, 200);
    },

 前端更改数据，更改为需要的数据，我这是添加数据

addrow(a, b) {
      //  numa = numa
      const loading = this.$loading({
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
      console.log(a, b);
      let obg = {
        id: "",
        name: b.name,
        category_id: b.category_id,
        namea: "",
        space: [],
        type: 0,
        isshow: true,
        isshowa: false,
        inpua: "",
        inpub: "",
      };
      //添加单元格到最后

      let subscript = this.datab.filter((item) => {
        return item.name == obg.name;
      });
      let subscript1 = this.datab.findIndex((item) => {
        return item.name == obg.name;
      });
      // console.log(subscript.length, subscript1);
      this.datab.splice(subscript1 + subscript.length, 0, obg);
      console.log(this.datab);
      this.getSpanArr(this.datab);

      setTimeout(() => {
        loading.close();
      }, 600);
    },

合并单元格时用到处理过的数据

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

最后

以上就是背后往事为你收集整理的合并Element ui单元格的全部内容，希望文章能够帮你解决合并Element ui单元格所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。