vue2表格显隐列的封装【升级缓存版】

本文主要是介绍vue2表格显隐列的封装【升级缓存版】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景

我们知道，若依后台有列表页、表格字段有显隐列的功能，但是，页面一旦刷新，就又回到初始状态了，但是有时候我们想要刷新后也保留我们设置的显隐列，就需要自己封装了
若依显隐列示例图如下：
在这里插入图片描述

源码

效果展示

效果图如下，点击设置显隐列图标，弹框设置界面，点击修改后会保存设置，刷新后按照我们的设置来显示，即缓存版
在这里插入图片描述

使用方法

1. 在合适的位置（一般在表格上方）放置显隐列组件，该组件默认只展示一个图标，图标可自定义
1. 为表格的字段添加v-if判断，详见下图
1. 在data()中设置默认的展示字段

data() {return {// 需要展示的字段checkList: [], // 字段信息，弹框中展示用的fieldDisplayList: [{ label: "缺陷编号", prop: "dangerCode", },{ label: "缺陷类型", prop: "dangerType", },{ label: "缺陷分类", prop: "dangerCategory", },{ label: "缺陷状态", prop: "step", },{ label: "缺陷等级", prop: "dangerLevel", },{ label: "上报内容", prop: "dangerContent", },{ label: "缺陷位置", prop: "startAxis", },{ label: "上报人", prop: "reportName", },{ label: "上报时间", prop: "reportTime", },],}	
}

1. 在created()中设置默认初始为全部显示即可

this.fieldDisplayList.map((f) => {this.checkList.push(f.prop);
});

源码

<template><div><el-tooltip effect="dark" content="设置展示字段"><img class="field-setting" @click="showDialog = true" src="@/assets/images/fieldSetting.jpg" alt="设置展示字段"></el-tooltip><el-dialogtitle="设置展示字段":visible.sync="showDialog":close-on-press-escape="false":width="width"append-to-bodyv-dialog-drag><el-row :gutter="gutter"><el-checkbox-group v-model="checkArray">
<!--          :key="index"--><template v-for="(item,index) in list"><el-col :span="item.elCol || elCol" v-if="item.hide !== true"><el-checkbox :label="item.prop" :disabled="false">{{ item.label }}</el-checkbox></el-col></template></el-checkbox-group></el-row><template v-slot:footer><el-button @click="submits" type="primary">修改</el-button><el-button @click="cancel">取消</el-button></template></el-dialog></div>
</template><script>export default {model: {prop: 'myValue', // 默认是valueevent: 'myInput', // 默认是input},props: {// 名称name:{type: String,default: () => '',},/*** 所有显示字段的列表* 格式： {*   prop: 唯一键名，*   label: 显示的名称*   hide: 是否隐藏，默认不填不隐藏，为true时隐藏* }* */list: {type: Array,default: () => [],},// 默认显示的主要字段列表defaultCheckList: {type: Array,default: () => [],},gutter: {type: Number,default: () => 10,},elCol: {type: Number,default: () => 8,},width: {type: String,default: "500px",},},data() {return {checkArray:[],showDialog: false}},watch: {list(val) {this.checkArray = val.map(p=>p.prop)this.init()},},mounted() {this.checkArray = this.list.map(p=>p.prop)this.init()},methods: {init() {const localCheckArray = localStorage.getItem(this.name)// 如果本地缓存有，那么就存储起来，显示全部if(localCheckArray) {this.checkArray = localCheckArray.split(',')this.$emit("myInput", this.checkArray);} else {// 如果本地存储没有，且设置的默认展示字段数量大于0，那么就展示传入的主要字段if(this.defaultCheckList.length > 0) {this.checkArray = this.defaultCheckListthis.$emit("myInput", this.checkArray);}}},// 提交更改的时候，刷新主表格的key值submits() {const checkArray = this.checkArray.join(',') || '';localStorage.setItem(this.name, checkArray)this.$emit("myInput", checkArray)this.$emit('change', Math.random())this.cancel()},cancel() {this.showDialog = false}},
};
</script><style lang="scss" scoped>
.el-col {padding: 10px 0;
}
/* 设置显示隐藏 */
.field-setting {float: right;cursor: pointer;
}</style>