美文网首页
vue el-table合并单元格

vue el-table合并单元格

作者: 温柔vs先生 | 来源:发表于2024-08-14 14:22 被阅读0次
    // 获取信息
    const getSocDept = (deptId) => {
      state.drawerLoading = true;
      socDeptDeptInfo(deptId)
        .then((res) => {
          state.drawerForm = res.data;
          state.drawerLoading = false;
          resetSpanArr();
        })
        .catch(() => {
          state.drawerLoading = false;
        });
    };
    function resetSpanArr() {
      let contactDot = 0;
      state.spanArr = [];
      state.drawerForm.socTenantDTOList.forEach((item, index) => {
        //遍历tableData数据,给spanArr存入一个1,第二个item.id和前一个item.id是否相同,相同就给
        //spanArr前一位加1,spanArr再存入0,因为spanArr为n的项表示n项合并,为0的项表示该项不显示,后面有spanArr打印结果
        if (index === 0) {
          state.spanArr.push(1);
        } else {
          if (
            item.tenantId === state.drawerForm.socTenantDTOList[index - 1].tenantId
          ) {
            state.spanArr[contactDot] += 1;
            state.spanArr.push(0);
          } else {
            contactDot = index;
            state.spanArr.push(1);
          }
        }
      });
    
      console.log('state.spanArr-----------', state.spanArr);
    }
    function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);
    
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = state.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(_row, _col);
    
        //该形式为行合并
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    }
    

    https://www.cnblogs.com/liuXiaoDi/p/15161966.html

    相关文章

      网友评论

          本文标题:vue el-table合并单元格

          本文链接:https://www.haomeiwen.com/subject/cyjskjtx.html