项目背景:
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>