vxe-table 如何实现分组列头折叠列功能

梁宁 · 前天 15:00

实现 vxe-table 分组列头折叠列功能非常简单，只需改变列的 visible 就可以实现
https://vxetable.cn

通过修改列的 visible 属性来精确控制列的显示隐藏

<template>
<vxe-table
border
height="400"
:data="tableData">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-colgroup field="g1" title="分组1">
<template #header="{ column }">
<vxe-button mode="text" :icon="foldMaps.g1 ? 'vxe-icon-square-minus' : 'vxe-icon-square-plus'" @click="collapsable('g1')"></vxe-button>
{{ column.title }}
</template>
<vxe-column field="name" title="Name" width="200"></vxe-column>
<vxe-column field="role" title="Role" :visible="foldMaps.g1" width="200"></vxe-column>
<vxe-column field="sex" title="Sex" :visible="foldMaps.g1" width="200"></vxe-column>
</vxe-colgroup>
<vxe-colgroup field="g2" title="分组2">
<template #header="{ column }">
<vxe-button mode="text" :icon="foldMaps.g2 ? 'vxe-icon-square-minus' : 'vxe-icon-square-plus'" @click="collapsable('g2')"></vxe-button>
{{ column.title }}
</template>
<vxe-column field="age" title="Age" width="200"></vxe-column>
<vxe-column field="rate" title="Rate" :visible="foldMaps.g2" width="200"></vxe-column>
<vxe-column field="address" title="Address" :visible="foldMaps.g2" width="200"></vxe-column>
</vxe-colgroup>
</vxe-table>
</template>

复制代码

https://gitee.com/x-extends/vxe-table

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册