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

先看运行结果：
初始是默认为显示全部信息：

点击隐藏，结果如下图：

完整代码如下:(表格数据：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元素还在。

官网解释：

vue表格某一列的显示与隐藏相关推荐

vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )
最终效果如下页面只需要设置两个参数(适用于element及antd) columnSetting // 是否显示列设置按钮 // name="TtableColumnSet" / ...
Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
vue基于 input 实现密码的显示与隐藏功能
目录前言: 一.准备图标二.Vue程序界面的展示三.代码总结: 前言: 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非 ...
antd表格列自定义显示与隐藏
效果图: 相关定义: ckValues: [], //checkgroup设置值chkAll: true, //全选indeterminate: false, //模糊状态poped: false / ...
vue复制html表格单列,vue表格含有一列多选框，如何获取被选中的行的数据？
1.仿照element-ui官网贴出的demo,table表格多选,选择多行数据时使用 Checkbox.但是无法获取this.multipleSelection的值.相关代码如下: 男女个人团 ...
vue-element-table列内容显示过多隐藏
需求场景: 我们用vue 和element 组件进行项目开发的时候如图,如果当前列的内容显示过多,就会换行我们想显示一行,不让他们拐弯特别难看变成类似这样的咋地办呢? 我们需要增加这样的属性 ...
Vue鼠标移入（悬停）显示-移出隐藏
需求:详情页面显示多张图片,当鼠标悬停在某张图片上时,图片上显示下载按钮:鼠标移出后,下载按钮隐藏. 最终效果如下: ①鼠标悬停 ②鼠标移出实现 ①布局 <div v-if="det ...
表格html5 隐藏字段,element-ui表格组件table实现列的动态显示与隐藏
首先,写一个基础的表格.(参考element-ui基础表格) export default { data() { return { tableData: [ { date: "2016-05 ...
easyui 隐藏input_easyui datagrid 列显示和隐藏
//当查询IT基础设施的时候隐藏'STAFF_ID'.'ITSM_STAFF_ID' if($("input[name='currentstate']").val()==2){ $ ...

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

vue表格某一列的显示与隐藏相关推荐

最新文章

热门文章