当前位置: 首页 > news >正文

vxe-table中vxe-grid中的合并单元格(合并行、列)

效果图(我所用到的是合并行):根据personName人员名称相同合并行

<vxe-grid v-bind="gridOptions" ref="tableRefs"></vxe-grid>


// 列表表格数据
const gridOptions = ref({
  data: [],
  align: 'center',
  loading: false,
  border: true,
  height: '300px',
  columns: [
    { type: 'seq', width: 50 },
    {
      title: '人员名称',
      field: 'personName'
    },
    {
      title: '人员类型',
      field: 'typeName'
    },
    {
      title: '代垫公司',
      field: 'proxyOrgName'
    },
    {
      title: '开始时间',
      field: 'startTime'
    },
    {
      title: '结束时间',
      field: 'endTime'
    }
  ]
});
const getPage = async () => {
  gridOptions.value.loading = true;
  const res = await PersonnelTypeManagementApi.personHistory({
    pageNo: customMade.value.pageNo,
    pageSize: customMade.value.pageSize,
    orgId: rightOrgId.value,
    personId: props.rowData.personId
  });
  gridOptions.value.loading = false;
  gridOptions.value.data = res.data.rows;
  nextTick(() => { //必须在nextTick中请求,否则表格不会重新渲染
    updateMergeCells(res.data.rows);
  });
  customMade.value.total = res.data.totalRows;
};
// 合并规则
const updateMergeCells = tableData => {
  const merges = [];
  let prevPersonName = null;
  let count = 0;

  for (let rowIndex = 0; rowIndex < tableData.length; rowIndex++) {
    const currentRow = tableData[rowIndex];
    if (prevPersonName === currentRow.personName) {
      count++;
    } else {
      if (count > 0) {
        // 注意这里 row 是从 rowIndex - count 开始的
        merges.push({ row: rowIndex - count - 1, col: 1, rowspan: count + 1, colspan: 1 });
      }
      prevPersonName = currentRow.personName;
      count = 0;
    }
  }

  // 处理最后一组相同的 personName
  if (count > 0) {
    merges.push({ row: tableData.length - count - 1, col: 1, rowspan: count + 1, colspan: 1 });
  }

  if (tableRefs.value) {
    tableRefs.value.setMergeCells(merges);//设置合并
  }
};

相关文章:

  • 音视频入门基础:RTP专题(17)——音频的SDP媒体描述
  • 主流向量数据库对比
  • ubuntu 24 安装 python3.x 教程
  • 深度学习篇---Opencv中Haar级联分类器的自定义
  • 怎样进行相关论文的调研——How to conduct research on relevant papers?
  • WebSocket 使用教程
  • C# net deepseek RAG AI开发 全流程 介绍
  • 大数据学习(66)- CDH管理平台
  • 爬虫一些基础知识的备忘录(需要自取)
  • 大语言模型微调和大语言模型应用的区别?
  • Python中将Markdown文件转换为Word
  • hadoop案例实践:气象大数据离线分析
  • 悬挂指针与野指针:如何避免常见内存问题
  • MySql学习_基础Sql语句
  • WSL 中的高级设置配置
  • kkFileView文件预览组件部署说明
  • 工控hmi医疗终端机的界面如何来设计?本文为你解答
  • Spring Boot 参数校验异常与错误编码映射方案
  • 什么是净利润
  • BGP实验(二)—路由反射器
  • 泰山景区管委会:未经审核同意不得擅自举办竞速类登山活动
  • 世联行:2024年营业收入下降27%,核心目标为“全面消除亏损公司和亏损项目”
  • 我国首次实现地月距离尺度的卫星激光测距
  • 商务部:美方应彻底取消所有对华单边关税措施
  • 吉林建筑大学党委原书记崔征接受纪律审查和监察调查
  • 《亡命驾驶》:一场对于男子气概的终极幻想