美文网首页
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