vxe-table表头分组，渲染多维数据，实现隐藏显示列

想要吐泡泡的鱼

于 2024-08-30 16:44:43 发布

阅读量115

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46190955/article/details/141720338

版权

项目背景：
vxe-table@3.5.4，表头分组情况下，要根据搜索条件的变化，实现分组表头和列的动态隐藏和显示
出现问题：

原本是想使用v-if来实现，但是尝试多次发现，只能控制vxe-colgroup整个的隐藏显示，其内部包含的vxe-column不受控制

解决方式：

给每个分组表头的最外层的 vxe-colgroup标签添加一个key属性，属性值可以使用Math.random(）生成随机值，对需要控制隐藏显示状态的vxe-column，使用v-if来控制即可，这样每次其内部的vxe-column的隐藏显示状态发生变化时，整一块都会重新渲染，这样就实现分组表头内部的vxe-column的隐藏和显示功能啦

示例代码如下：
<vxe-colgroup title="合计" align="center" :key="Math.random()">
	<vxe-column field="val1" title="正常表头1" width="80" align="center"></vxe-column>
	<vxe-column field="val2" title="正常表头2" width="80" align="center"></vxe-column>
	<vxe-column v-if="searchForm.ifShowPrice" field="val3" title="需要隐藏表头" width="100" align="center" :key="Math.random()"></vxe-column>
</vxe-colgroup>