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

效果如下:
在这里插入图片描述
合并单元格(表头):
: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" title
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vxe-table支持合并,可以通过设置表头的 `children` 属性来实现。具体操作步骤如下: 1. 在表头中设置 `children` 属性,用于定义需要合并。 2. 在表格中使用 `span-method` 属性来指定合并规则。 以下是一个示例代码: ```html <template> <vxe-table :data="tableData"> <vxe-table-column type="seq" width="60"></vxe-table-column> <vxe-table-column label="姓名" prop="name"></vxe-table-column> <vxe-table-column label="性别" prop="sex"></vxe-table-column> <vxe-table-column label="年龄" prop="age"></vxe-table-column> <vxe-table-column label="地址" prop="address"> <template #header> <div>地址</div> <div> <vxe-button @click="handleMerge">合并</vxe-button> </div> </template> <template #cell="{row, column, rowIndex, columnIndex}"> {{ row.address }} </template> <template #spanMethod="{ row, column, rowIndex, columnIndex }"> <!-- 判断是否需要合并 --> <template v-if="columnIndex === 3 && rowIndex === 0"> <td :rowspan="2" :colspan="2">{{ row.address }}</td> </template> <template v-else-if="columnIndex === 4 && rowIndex === 1"> <!-- 合并后的单元格不需要显示内容 --> <td></td> </template> <template v-else> <td>{{ row[column.property] }}</td> </template> </template> </vxe-table-column> </vxe-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', sex: '男', age: 18, address: '北京市海淀区' }, { name: '李四', sex: '女', age: 20, address: '北京市朝阳区' }, { name: '王五', sex: '男', age: 22, address: '上海市浦东新区' }, { name: '赵六', sex: '女', age: 24, address: '广州市天河区' } ] } }, methods: { handleMerge() { // 设置需要合并 this.$refs.table.setAllColumnVisible(false) this.$refs.table.setColumnVisible(['name', 'sex', 'age'], true) this.$refs.table.setColumnVisible(['address'], true) this.$refs.table.setHeaderVisible(false) } } } </script> ``` 在上面的示例代码中,我们通过设置表头的 `children` 属性来定义需要合并,即 `地址` 。然后在表格中使用 `span-method` 属性来指定合并规则。在 `spanMethod` 方法中,我们判断当前单元格是否需要合并,如果需要合并,则设置 `rowspan` 和 `colspan` 属性来合并单元格

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值