vue表格某一列的显示与隐藏

huanxiangcoco

已于 2024-10-23 18:21:49 修改

阅读量2.1w

点赞数 2

分类专栏： vue之所遇的坑及解决方法文章标签：表格列的显示与隐藏 vue

于 2019-05-23 17:13:29 首次发布

本文链接：https://blog.csdn.net/huanxianxianshi/article/details/90484212

版权

vue之所遇的坑及解决方法专栏收录该内容

17 篇文章 3 订阅

订阅专栏

本文演示了在Vue中如何根据用户操作动态地显示或隐藏表格的某一列。使用el-switch组件控制显示状态，并结合v-if指令实现表格列的增减。重点强调了v-if与v-show的区别，v-if会真正移除DOM元素，而v-show只是改变display属性。

摘要由CSDN通过智能技术生成

先看运行结果：
初始是默认为显示全部信息：
在这里插入图片描述
点击隐藏，结果如下图：

完整代码如下:(表格数据：https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata）
< template>
< div class=“show-examples”>

< el-switch v-model=“value1” active-value=“false” inactive-value=“true” active-text=“隐藏” inactive-text=“显示” style=“height:50px” @change=“change”>
< /el-switch>

< el-table :data=“blogData” style="width: 100% ">

< el-table-column prop=“id” label=“#” width=“180”>
< /el-table-column>

< el-table-column prop=“name” label=“姓名” width=“180”>
< /el-table-column>

< el-table-column prop=“sex” label=“性别”>
< /el-table-column>

< el-table-column prop=“address” label=“住址” v-if=“values”>
< /el-table-column>
< /el-table>
< /div>
< /template>

< script >
import axios from ‘axios’
export default{
name:‘show-examples’,
data(){
return{
blogData:[],
value1:true,
values:true
}
},
created(){
axios.get(‘https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata’) .then((res)=>{
this.blogData=res.data.data.message;
})
},
methods:{
change(data){
if(data==“true”){
this.values=true;
}
else{
this.values=false
}
}
}
}
< /script>
< style >< /style>
注意：
1.change():获取switch 状态发生变化时的状态。
2.要想显示和隐藏某一列，记住不要使用v-show,一定要使用v-if。如本例粗线代码那样写。如果用v-show 不论怎么点都没有用（本人亲测有效）
v-if、v-show两者区别：
v-if 显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。