vue+elementUI配置表格的列显示与隐藏

描述：
表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue+elementUI（适配Vue3的Element Plus）实现的，具体效果与代码如下：
效果图：

完整代码：

<template><div id="app"><el-table :data="tableData" border style="width: 100%" ref="table"><el-table-columnfixedtype="index"align="center":index="1"><template #header><el-popoverplacement="bottom":width="600":visible="visible"><!-- 配置列面板 --><transition name="fade"><div><div>选择显示字段</div><div><el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox><el-checkbox v-model="showColumn.name">姓名</el-checkbox><el-checkbox v-model="showColumn.provinces">省份</el-checkbox><el-checkbox v-model="showColumn.city">市区</el-checkbox><el-checkbox v-model="showColumn.adreess">地址</el-checkbox><el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox></div></div></transition><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="visible = false">取消</el-button><el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button></div><template #reference><iclass="el-icon-setting"style="font-size: 22px; cursor: pointer"@click="visible = true"></i></template></el-popover></template></el-table-column><el-table-columnprop="date"label="日期"width="150"v-if="showColumn.date"></el-table-column><el-table-columnprop="name"label="姓名"width="120"v-if="showColumn.name"></el-table-column><el-table-columnprop="province"label="省份"width="120"v-if="showColumn.provinces"></el-table-column><el-table-columnprop="city"label="市区"width="120"v-if="showColumn.city"></el-table-column><el-table-columnprop="address"label="地址"minWidth="300"v-if="showColumn.adreess"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"v-if="showColumn.zipCode"></el-table-column><el-table-column label="操作" fixed="right" width="100" align="center"><template #default="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></div>
</template><script>
export default {data() {return {visible: false,tableData: [{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-04",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1517 弄",zip: 200333,},{date: "2016-05-01",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1519 弄",zip: 200333,},{date: "2016-05-03",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1516 弄",zip: 200333,},],// 列的配置化对象，存储配置信息showColumn: {date: true,name: true,provinces: true,city: true,adreess: true,zipCode: true,},};},mounted() {// 发请求得到showColumnInitData的列的名字if(localStorage.getItem("columnSet")){this.showColumn = JSON.parse(localStorage.getItem("columnSet"))}else{this.showColumn = {date: true,name: true,provinces: true,city: true,adreess: true,zipCode: true,};}},methods: {handleClick(row) {console.log(row);},saveColumn() {localStorage.setItem("columnSet",JSON.stringify(this.showColumn))this.visible = false;},},
};
</script><style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {opacity: 0;
}
</style>

问题：
1、可以简单实现，但最好的方法是列的全部字段也通过配置实现；
2、elementUI的popover嵌套在table里使用时，会出现面板的显示bug，例如本文是采用:visible=“visible”，如果按照正常双向绑定v-model:visible=“visible”，则会出现弹窗闪现的现象，弹出后会立马关闭；
现象：

原因猜想：
v-model:visible=“visible”，会自动触发遮罩层关闭，置visible变为false（watch监听visible，点击弹出按钮时，visible变为true后会立马变为false）；
3、如果某一列设置minWidth属性，如果隐藏该列，则popover会出现弹出两个窗口的异常现象，例如“地址”列：

故可采用dialog来实现：

<template><div id="app"><el-table :data="tableData" border style="width: 100%" ref="table"><el-table-columnfixedtype="index"align="center":index="1"><template #header><iclass="el-icon-setting"style="font-size: 22px; cursor: pointer"@click="visible = true"></i></template></el-table-column><el-table-columnprop="date"label="日期"width="150"v-if="showColumn.date"></el-table-column><el-table-columnprop="name"label="姓名"width="120"v-if="showColumn.name"></el-table-column><el-table-columnprop="province"label="省份"width="120"v-if="showColumn.provinces"></el-table-column><el-table-columnprop="city"label="市区"width="120"v-if="showColumn.city"></el-table-column><el-table-columnprop="address"label="地址"minWidth="300"v-if="showColumn.adreess"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"v-if="showColumn.zipCode"></el-table-column><el-table-column label="操作" fixed="right" width="100" align="center"><template #default="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table><el-dialog title="字段配置" v-model="visible"><transition name="fade"><div><div>选择显示字段</div><div><el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox><el-checkbox v-model="showColumn.name">姓名</el-checkbox><el-checkbox v-model="showColumn.provinces">省份</el-checkbox><el-checkbox v-model="showColumn.city">市区</el-checkbox><el-checkbox v-model="showColumn.adreess">地址</el-checkbox><el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox></div></div></transition><template #footer><span class="dialog-footer"><el-button @click="visible = false">取 消</el-button><el-button type="primary" @click="saveColumn">确 定</el-button></span></template></el-dialog></div>
</template>

效果：

vue+elementUI配置表格的列显示与隐藏相关推荐

elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
7.2DIY可视化后台表格自定义列显示类型
后台表格自定义列显示类型本教程均在第一节中项目启动下操作后台表格自定义列显示类型前言一.图片格式内容显示: 二. 效果展示: http://localhost:9999/#/hdp 三:自定义 ...
AntDesignVue表格中列的自定义隐藏与展示
Vue版本:2.6.x,AntDesignVue版本:1.7.x 在工作中难免会遇到这种情况,较多列的表格展示,如果只想看某些关键列的数据,就需要用到筛选,官方文档的筛选是针对行的数据筛选,没有对列筛 ...
vue基于 input 实现密码的显示与隐藏功能
目录前言: 一.准备图标二.Vue程序界面的展示三.代码总结: 前言: 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非 ...
vue+elementui 打印表格不显示表格边框线
如果 Vue 项目使用了 Element UI 组件库中的 Table 组件打印表格时不显示表格边框线,可以通过在 CSS 中覆盖样式来解决. 可以在项目中新建一个 CSS 文件,如 print.cs ...
element ui 表格动态列显示空白bug 修复
在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是 ...
vue+elementui查询表格数据页面卡死问题
一问题描述 vue+elementui项目,本地idea启动,功能测试没问题,部署到tomcat服务器,查询表格数据,正确返回后,页面卡死. 浏览器console栏有vue warn信息:you m ...

vue+elementUI配置表格的列显示与隐藏

vue+elementUI配置表格的列显示与隐藏

vue+elementUI配置表格的列显示与隐藏相关推荐

最新文章

热门文章