vue 表格 vxe-table 如何实现折叠列功能

在数据表格中，当列数过多时，用户往往需要根据当前关注的数据维度，临时隐藏或展开某些列。vxe-table 提供了灵活的列显示控制 API（showColumn / hideColumn），结合自定义表头插槽，可以轻松实现类似“折叠面板”的列分组折叠功能。

实现思路

1. 列分组结构：通过 children 将列划分为逻辑分组。
2. 自定义表头插槽：在分组的父列上使用 slots.header 插入折叠按钮。
3. 控制列显隐：点击按钮时，通过表格实例的 hideColumn / showColumn 方法，批量控制该分组下所有子列的显示状态。
4. 状态切换：维护一个响应式变量（如 showGroup1），用于切换按钮图标和列显隐状态。

代码

<template>
  <div>
    <vxe-grid ref="gridRef" v-bind="gridOptions">
      <template #g1_header="{ column }">
        <vxe-button mode="text" :icon="showGroup1 ? 'vxe-icon-square-minus' : 'vxe-icon-square-plus'" @click="handleGroup1"></vxe-button>
        <span>{{ column.title }}</span>
      </template>

      <template #g2_header="{ column }">
        <vxe-button mode="text" :icon="showGroup2 ? 'vxe-icon-square-minus' : 'vxe-icon-square-plus'" @click="handleGroup2"></vxe-button>
        <span>{{ column.title }}</span>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const showGroup1 = ref(true)
const showGroup2 = ref(true)

const gridOptions = reactive({
  border: true,
  height: 400,
  columns: [
    { type: 'checkbox', width: 60 },
    {
      field: 'g1',
      title: '分组1',
      slots: {
        header: 'g1_header'
      },
      children: [
        { field: 'name', title: 'Name', width: 200 },
        { field: 'role', title: 'Role', width: 200 },
        { field: 'sex', title: 'Sex', width: 200 }
      ]
    },
    {
      field: 'g1',
      title: '分组1',
      slots: {
        header: 'g2_header'
      },
      children: [
        { field: 'age', title: 'Age', width: 200 },
        { field: 'rate', title: 'Rate', width: 200 },
        { field: 'address', title: 'Address', width: 200 }
      ]
    }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
    { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
    { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' }
  ]
})

const handleGroup1 = () => {
  const $grid = gridRef.value
  if ($grid) {
    showGroup1.value = !showGroup1.value
    if (showGroup1.value) {
      $grid.showColumn(['role', 'sex'])
    } else {
      $grid.hideColumn(['role', 'sex'])
    }
  }
}

const handleGroup2 = () => {
  const $grid = gridRef.value
  if ($grid) {
    showGroup2.value = !showGroup2.value
    if (showGroup2.value) {
      $grid.showColumn(['rate', 'address'])
    } else {
      $grid.hideColumn(['rate', 'address'])
    }
  }
}
</script>

说明

• 隐藏列时，不需要隐藏父列本身，只需隐藏其子列即可。
• 如果分组列本身也带有 field，需要注意避免与子列字段重复。
• 折叠/展开只影响列的显示状态，不影响表格数据和排序等逻辑。

应用场景

通过 自定义表头插槽 + 列显隐控制 API，vxe-table 实现了非常灵活的列折叠功能。这种方案不仅适用于手动折叠，还可以扩展到“用户自定义列显示”等更复杂的场景。核心逻辑简单清晰，只需维护一个状态变量来控制列的显示/隐藏即可。

https://vxetable.cn

原文链接：vue 表格 vxe-table 如何实现折叠列功能