Vue动态控制表格列的显示隐藏

效果

如上图所示，点击table右上方的表格按钮，弹出菜单栏，进行勾选，从而达到表格对应列显示和隐藏

1.HTML部分(ant design)

<div class="right-btns"><!-- 按钮 --><a-button class="table" @click="handleTable"><a-icon type="table" /></a-button><!-- 弹出框 --><div class="tableSelect" v-if="tableSelectVisible"><a-checkbox-group :value="checkValue" :options="colOptions"/></div>
</div><!-- 表格内容 -->
<a-table :dataSource="expertList"><a-table-column v-if="colIsTrue[0]" title="专家ID" key="idAsString" /><a-table-column v-if="colIsTrue[1]" title="专家姓名" key="name" /><a-table-column v-if="colIsTrue[2]" title="行业" key="industry" /><a-table-column v-if="colIsTrue[3]" title="年龄" key="age" /><a-table-column v-if="colIsTrue[4]" title="学历" key="education" /><a-table-column v-if="colIsTrue[5]" title="工作单位" key="company" /><a-table-column v-if="colIsTrue[6]" title="入库时间" key="createAt" /><a-table-column title="操作" key="action"><template slot-scope="record"><a-button size="small" icon="edit" type="primary" @click="openUpd(record.id)">编辑</a-button><a-button size="small" icon="delete" type="primary" @click="openDel(record)">删除</a-button></template></a-table-column>
</a-table>

a. 通过v-if="colIsTrue[6]"来判断表格对应列的状态

2.javascript部分

data(){return {colOptions:[{label:'专家ID',value:0,onChange:this.colChange},{label:'专家姓名',value:1,onChange:this.colChange},{label:'行业',value:2,onChange:this.colChange},{label:'年龄',value:3,onChange:this.colChange},{label:'学历',value:4,onChange:this.colChange},{label:'工作单位',value:5,onChange:this.colChange},{label:'入库时间',value:6,onChange:this.colChange},],colIsTrue:[],checkValue:[],}
},
created(){//当所有数据都加载完成之后，将checkbox设置为全部选中状态this.colOptions && this.colOptions.forEach((item,index)=>{this.colIsTrue.push(true)this.checkValue.push(index)})
},
mounted(){//菜单栏弹出后，点击其它地方，关闭菜单栏let that=this;$(document).bind("click", function(e) {var target = $(e.target);if (target.closest(".tableSelect").length == 0 && target[0].className.indexOf('table')==-1) {that.tableSelectVisible=false;}})this.colOptions && this.colOptions.forEach((item,index)=>{this.colIsTrue.push(true)this.checkValue.push(index)})
},
methods:{colChange(e){//当checkbox有修改时const index=e.target.valuethis.colIsTrue[index] ? (this.$set(this.colIsTrue,index,false)) : (this.$set(this.colIsTrue,index,true))if(e.target.checked) this.checkValue.push(index)else{this.checkValue.forEach((item,arrIndex)=>{if(item==index){this.checkValue.splice(arrIndex,1)}})}},handleTable(){//打开菜单栏this.tableSelectVisible=true;},
}

3.css样式部分

.right-btns{position:relative;.tableSelect{position: absolute;background:#fff;border:1px solid #ecedef;display:inline-block;top: 33px;right: 0;z-index: 100;padding: 10px;width: 156px;}
}

Vue动态控制表格列的显示隐藏相关推荐

Vue控制表格列的显示隐藏
table控制列显示隐藏的功能当选中时 table列显示,未选中时隐藏该列首先造轮子全局拿来用 // 这是子组件 <template><div style="text ...
element-table在实现columns（表格列）显示隐藏过程中由于show-overflow-tooltip导致的渲染问题
背景刚开始为了写表格方便所以在使用element时候使用v-for循环来写,所以代码类似于如下 <el-table-columnv-for="(item, index) in tab ...
layui表格列动态显示或隐藏
问题描述:多个功能使用同一个页面时,有时要求不同的功能中展示的表格列数据不同,这就需要动态设置表格列的显示或隐藏. 解决方案:layui渲染表格数据后有个完成的回调函数,在回调函数中根据你的逻辑条件动 ...
Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）
开发中遇到这样一个需求,该项目用的是iview UI组件,需求是: 表格列头有一个字段和一个单位,两者样式不同,理想效果如下:"建筑面积四个字为18px.单位(㎡)为16px". ...
antd表格列自定义显示与隐藏
效果图: 相关定义: ckValues: [], //checkgroup设置值chkAll: true, //全选indeterminate: false, //模糊状态poped: false / ...
element-ui表格列金额显示两位小数
对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值和 v-b ...
Vue+iview 密码框输入显示隐藏控制
Vue+iview 密码框输入控制显示隐藏 1. 背景 2. 最终效果 2.1 隐藏密码 2.2 显示密码 3. 实现步骤 3.1 使用v-if.v-else 3.2 密码隐藏 3.3 密码显示 3. ...
Vue按钮控制身份证号码显示隐藏中间部分
在实际开发中经常会遇到点击小眼睛图标控制身份证号码显示隐藏的情况.比如: 这是我在实际开发中遇到的问题,或许方法有点笨,但是可以实现,有大神请指教. 1.首先在data中保存数据,并且定义一个布尔值变 ...

Vue动态控制表格列的显示隐藏

Vue动态控制表格列的显示隐藏相关推荐

最新文章

热门文章