vxe-table 合并单元格&&合并列

最新推荐文章于 2024-07-12 17:10:13 发布

ho-J

最新推荐文章于 2024-07-12 17:10:13 发布

阅读量4.5k

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_49781990/article/details/130386283

版权

该博客介绍了如何在 vxe-table 中实现表格的单元格和列的合并功能。通过提供特定的数据结构和合并方法，当相邻行的某一列值相同时，vxe-table 将自动进行列合并。内容包括合并单元格（表头）的配置以及合并列的详细步骤。

摘要由CSDN通过智能技术生成

效果如下：
在这里插入图片描述
合并单元格（表头）：
:edit-render="{autofocus: '.vxe-input--inner'}"是控制是否可编辑单元格，和:edit-config搭配使用
合并列方法绑定:span-method，具体如下

<vxe-table
      ref="xTable"
      border
      resizable
      keep-source
      show-overflow
      align="center"
      :data="tableData1"
      :scroll-y="{enabled: false}"
      :span-method="rowspanMethod"
      :column-config="{resizable: true, width: 120}"
      :edit-config="isEdit ? {trigger: 'click', mode: 'cell' ,showStatus: true, icon: 'vxe-icon-edit'}:{}"
      @edit-closed="editClosedEvent"
    >
      <vxe-colgroup field="a" title="用量分析">
        <vxe-column field="b" title="业务">
          <template #default="{ row }">
            <span style="white-space: break-spaces">{
   {
    row.b }}</span>
          </template>
        </vxe-column>
        <vxe-column field="c" title="参数">
          <template #default="{ row }">
            <span style="white-space: break-spaces">{
   {
    row.c }}</span>
          </template>
        </vxe-column>
        <vxe-column field="d" title="业务类型I" />
        <vxe-colgroup field="e"