vue elementUI配置表格的列显示与隐藏
人气:0vue+elementUI配置表格的列显示与隐藏,供大家参考,具体内容如下
描述:
表格的列过多时,可以根据需要控制列的显示与隐藏,目前是采用Vue+elementUI(适配Vue3的Element Plus)实现的,具体效果与代码如下:
效果图:
完整代码:
<template> <div id="app"> <el-table :data="tableData" border style="width: 100%" ref="table"> <el-table-column fixed type="index" align="center" :index="1"> <template #header> <el-popover placement="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> <i class="el-icon-setting" style="font-size: 22px; cursor: pointer" @click="visible = true" ></i> </template> </el-popover> </template> </el-table-column> <el-table-column prop="date" label="日期" width="150" v-if="showColumn.date" > </el-table-column> <el-table-column prop="name" label="姓名" width="120" v-if="showColumn.name" > </el-table-column> <el-table-column prop="province" label="省份" width="120" v-if="showColumn.provinces" > </el-table-column> <el-table-column prop="city" label="市区" width="120" v-if="showColumn.city" > </el-table-column> <el-table-column prop="address" label="地址" minWidth="300" v-if="showColumn.adreess" > </el-table-column> <el-table-column prop="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-column fixed type="index" align="center" :index="1"> <template #header> <i class="el-icon-setting" style="font-size: 22px; cursor: pointer" @click="visible = true" ></i> </template> </el-table-column> <el-table-column prop="date" label="日期" width="150" v-if="showColumn.date" > </el-table-column> <el-table-column prop="name" label="姓名" width="120" v-if="showColumn.name" > </el-table-column> <el-table-column prop="province" label="省份" width="120" v-if="showColumn.provinces" > </el-table-column> <el-table-column prop="city" label="市区" width="120" v-if="showColumn.city" > </el-table-column> <el-table-column prop="address" label="地址" minWidth="300" v-if="showColumn.adreess" > </el-table-column> <el-table-column prop="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>
效果:
加载全部内容