vue 合并单元格

最新推荐文章于 2024-08-23 11:08:45 发布

晓柯爱

最新推荐文章于 2024-08-23 11:08:45 发布

阅读量1.5k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45799001/article/details/110670160

版权

vue 合并单元格

   //点击搜索按钮
    initEmps() {
      let url = "/contract/basic/?page=" + this.page + "&size=" + this.size;
      if (this.searchValue.contractNo) {
        url += "&contractNo=" + this.searchValue.contractNo;
      }
      if (this.searchValue.contractName) {
        url += "&contractName=" + this.searchValue.contractName;
      }
      if (this.searchValue.projName) {
        url += "&projName=" + this.searchValue.projName;
      }
      this.getRequest(url).then((resp) => {
        if (resp) {
          this.emps = resp.data;
          this.total = resp.total;
          this.getSpanData(this.emps);
        }
      });
    },
    getSpanData(data) {
      // 存放计算好的合并单元格的规则
      this.spanData = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanData.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].projName === data[i - 1].projName) {
            this.spanData[this.pos] += 1;
            this.spanData.push(0);
          } else {
            this.spanData.push(1);
            this.pos = i;
          }
        }
      }
    },
    // 合并单元格
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 需要合并的列
      if (columnIndex === 0) {
        const _row = this.spanData[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

  <el-table
          

 1. :span-method="spanMethod"

          :data="emps"
          stripe
          border
          style="width: 100%"
          :header-cell-style="{ color: '#000' }"
          class="tableBox"
        >