vxe-table表头分组,渲染多维数据,实现隐藏显示列
vxe-table@3.5.4,表头分组情况下,要根据搜索条件的变化,实现分组表头和列的动态隐藏和显示。
·
项目背景:
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>

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)