先看运行结果： 初始是默认为显示全部信息： 点击隐藏，结果如下图： 完整代码如下:(表格数据：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元素还在。
官网解释：
