【Vue】el-table 简易表格可筛选列
需求实现:
代码逻辑:
按钮控件:
1 2 3 4 5 6 7 8 | < el-popover placement="top-start"> < el-checkbox-group v-model="checkedColumns" @change="whenColumnBoxChange"> < div v-for="(col, idx) in optionColumns" :key="`optionColumns${idx}`"> < el-checkbox :label="col.property">{{ col.label }}</ el-checkbox > </ div > </ el-checkbox-group > < el-button style="float: right;" slot="reference" type="primary" size="mini">列筛选</ el-button > </ el-popover > |
表格组件要追加Ref标记:
1 | < el-table ref="elTable" v-loading="loading" size="small" stripe :height="tableHeight" :data="tableData"> |
需要设置的数据对象:
1 2 3 | defaultShow: true , checkedColumns: [], optionColumns: [] |
所需方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // 当选择时重新渲染表格 whenColumnBoxChange() { this .$refs[ 'elTable' ].doLayout() }, // 判断该列是否展示 getColumnShowFlag(colIdent) { return this .defaultShow || this .checkedColumns.includes(colIdent) }, // 初始化筛选项,并保证默认正常展示 (created调用) initialOptionColumnsData() { this .$nextTick(() => { const { columns } = this .$refs[ 'elTable' ] this .optionColumns = columns.filter(x => x.property).map(x => { return { id: x.id, label: x.label, property: x.property, flag: true } }) this .checkedColumns = this .optionColumns.map(x => x.property) this .defaultShow = false }) }, |
需要对一个个列进行判断方法设置:
1 2 3 4 5 | < el-table-column v-if="getColumnShowFlag('apInAmount')" prop="apInAmount" min-width="120px" label="收入总额(元)" align="right" show-overflow-tooltip> < template slot-scope="{ row }"> {{ transFormAmount(row.apInAmount) }} </ template > </ el-table-column > |
更新补充
一、追加默认过滤的列:
初始化方法追加一个用来过滤的集合:
1 2 3 4 5 6 7 8 9 10 11 12 | // 初始化筛选项,并保证默认正常展示 initialOptionColumnsData() { this .$nextTick(() => { const elTable = this .$refs[ 'elTable' ] this .optionColumns = elTable.columns.filter(x => x.property).map(x => { return { id: x.id, label: x.label, property: x.property, flag: true } }) this .checkedColumns = this .optionColumns.map(x => x.property).filter(x => ! this .excludeColumns.includes(x)) this .defaultShow = false elTable.doLayout() }) }, |
在需要过滤的集合中设置字段property即可:
1 2 3 4 5 6 7 | excludeColumns: [ 'servCode' , 'deName' , 'inPmanagerName' , 'inBegTime' , 'inEndTime' ] |
二、自定义列内容污染问题:
发现现有BUG,如果是扩展template自定义列内容时会污染下一列,解决办法就是对template也进行判断
1 2 3 4 5 | < el-table-column v-if="getColumnShowFlag('apInAmount')" prop="apInAmount" min-width="120px" label="收入总额(元)" align="right" show-overflow-tooltip> < template v-if="getColumnShowFlag('apInAmount')" slot-scope="{ row }"> {{ transFormAmount(row.apInAmount) }} </ template > </ el-table-column > |
三、操作样式追补:
利用操作列固定头来设置,将按钮改为图标:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < el-table-column fixed="right" label="操作" width="180px" align="center"> < template slot="header"> < el-popover placement="top-start" trigger="hover"> < el-checkbox-group v-model="checkedColumns" @change="whenColumnBoxChange"> < div v-for="(col, idx) in optionColumns" :key="`optionColumns${idx}`"> < el-checkbox :label="col.property">{{ col.label }}</ el-checkbox > </ div > </ el-checkbox-group > < span slot="reference"> 操作 < i class="el-icon-s-tools" style="margin-left: 5px;" /> </ span > </ el-popover > </ template > < template slot-scope="scope"> < span v-permission="permits.update" class="link-color" @click="openEditDialog(scope.row)"> < i class="el-icon-edit-outline" /> 设置 </ span > < span v-permission="permits.update" class="link-color" @click="openItemDialog(scope.row)"> < i class="el-icon-edit-outline" /> 计划 </ span > </ template > </ el-table-column > |
四、header插槽不更新复选框问题
el-table 后续使用嵌套组件加载时发现复选框不更新:
原因找到了:
1 | https: //blog .csdn.net /yy_demo/article/details/139067420 |
解决办法:
1 2 3 4 | < template slot="header"> 改为 < template #header> 检测数据更新刷新组件 |
五、发现存在nextTick报错:
初始化的列看不到值了
解决办法是对列增加key属性,标识唯一
1 | https: //www.jianshu.com/p/98f329c4a582 |
但是随后第二个功能的表格又不起作用了,排查了一下午问题才发现v-permission影响的
就是操作列中的操作标签使用了v-permission进行权限控制,但是在改用v-if后就不会报错了
为了优化使用方法,我追加了全局注册的方法
1 2 3 4 5 6 7 8 9 | import Vue from 'vue' import store from '@/store' /** * 权限校验 */ Vue.prototype.$permitValidate = val => { return store.getters.permissions.includes(val) } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】