Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题
更新时间:2023年11月17日 09:28:56 作者:TongYuTian
这篇文章主要介绍了Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
动态显示/隐藏表格的列el-table-column
- 在el-table-column上使用v-show绑定是无效果的
- 所以我将v-show改为v-if
- 但是进过几次切换显示/隐藏后,发现表格的排版完全乱了
- 例:原本期望在末尾的列,居然跑到前面了
解决方案
给每一个el-table-column标签上都加一个key="index"
<el-table :data="data">
<el-table-column label="姓名" key="1">
<template slot-scope="scope" v-if="!isAuditReferee">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="手机号码" v-if="isAuditReferee" key="2">
<template slot-scope="scope">
<span>{{ scope.row.phone }}</span>
</template>
</el-table-column>
<el-table-column label="性别" v-if="!isAuditReferee" key="3">
<template slot-scope="scope">
<span>{{ scope.row.sex }}</span>
</template>
</el-table-column>
</el-table>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
使用element-ui设置table组件宽度(width)为百分比
这篇文章主要介绍了使用element-ui设置table组件宽度(width)为百分比方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04
uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)
网上百度uniapp使用vant时,很多答案都是在根路径下创建文件夹,而且都是基于小程序环境的,其实uniapp可以直接使用的,这篇文章主要给大家介绍了关于uni-app项目中引入Vant UI组件库完美避坑指南的相关资料,需要的朋友可以参考下2024-02-02
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
这篇文章主要介绍了用vue2.x版本+adminLTE开源框架 搭建后台应用模版,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-03-03


最新评论