Vue控制表格列的显示隐藏

table控制列显示隐藏的功能

当选中时 table列显示，未选中时隐藏该列
首先造轮子全局拿来用

// 这是子组件
<template><div style="text-align: right;"><el-popover placement="right" title="列筛选" trigger="click" ><el-checkbox-group v-model="checkList" @change="filter" style="max-width:1500px;"><el-checkboxv-for="(item, index) in tableList":key="index":label="item.value"></el-checkbox></el-checkbox-group><el-button type="button" size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button></el-popover></div>
</template><script>
// import AddOrUpdate from "./advert-add-or-update";export default {data() {return {tableList:[],checkList:[],result:[],list:[],};},props:{datas:{}},created(){//   console.log(this.datas)this.tableList = this.datas},mounted(){this.tableList.forEach((item,index)=>{this.checkList.push(item.value)})},methods:{filter(val) {this.tableList.forEach((item,index)=>{this.list.push(item.value)})this.result = this.list.filter(number => !val.includes(number))// console.log('result',result)if(this.result.length>=1){this.result.forEach((item,index)=>{this.tableList.forEach((items,indexs)=>{if(items.value == item){items.isTrue = false}})})}// console.log('val',val)val.forEach((item,index)=>{// console.log(item)this.tableList.forEach((items,indexs)=>{if(items.value == item){items.isTrue = true}})})},},
};
</script>
<style lang="scss" scoped>
</style>

// 这是父组件
//！！！！！！！！！！！！！！！！引入<省略>
// 调用
<screen :datas='tableList'></screen>
//例如这是你的table
<el-table :data="dataList" border row-key="categoryId" style="width: 100%;" v-loading="dataListLoading"><el-table-column prop="id" header-align="center" align="center" label="ID" width="80" v-if="tableList[0].isTrue"></el-table-column><el-table-column prop="status" header-align="center" align="center" label="状态" width="100" v-if="tableList[1].isTrue"></el-table-column><el-table-column prop="prodName" header-align="center" align="center" label="产品名" width="200" v-if="tableList[2].isTrue"></el-table-column>
</el-table>//在需要进行切换显示的列后面加上 v-if="tableList[*].isTrue" 这个

然后js部分在return 中加入这些

//下面tableList中对象的数量要和table中加入v-if的数量一致
// 因为用不到label 就直接删掉了
tableList:[{value: 'ID',isTrue:true,},{value: '状态',isTrue:true,},{value: '产品名',isTrue:true,},],checkList:[],result:[],list:[],

// components中别忘了注册components: {screen},

加油！

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

Vue动态控制表格列的显示隐藏
效果如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对应列显示和隐藏 1.HTML部分(ant design) <div class="right-bt ...
element-table在实现columns（表格列）显示隐藏过程中由于show-overflow-tooltip导致的渲染问题
背景刚开始为了写表格方便所以在使用element时候使用v-for循环来写,所以代码类似于如下 <el-table-columnv-for="(item, index) in tab ...
Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
layui表格列动态显示或隐藏
问题描述:多个功能使用同一个页面时,有时要求不同的功能中展示的表格列数据不同,这就需要动态设置表格列的显示或隐藏. 解决方案:layui渲染表格数据后有个完成的回调函数,在回调函数中根据你的逻辑条件动 ...
iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）
开发中遇到这样一个需求,该项目用的是iview UI组件,需求是: 表格列头有一个字段和一个单位,两者样式不同,理想效果如下:"建筑面积四个字为18px.单位(㎡)为16px". ...
Vue+iview 密码框输入显示隐藏控制
Vue+iview 密码框输入控制显示隐藏 1. 背景 2. 最终效果 2.1 隐藏密码 2.2 显示密码 3. 实现步骤 3.1 使用v-if.v-else 3.2 密码隐藏 3.3 密码显示 3. ...
antd表格列自定义显示与隐藏
效果图: 相关定义: ckValues: [], //checkgroup设置值chkAll: true, //全选indeterminate: false, //模糊状态poped: false / ...
element-ui表格列金额显示两位小数
对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值和 v-b ...
前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

Vue控制表格列的显示隐藏

table控制列显示隐藏的功能

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

最新文章

热门文章