背景
我们知道,若依后台有列表页、表格字段有显隐列的功能,但是,页面一旦刷新,就又回到初始状态了,但是有时候我们想要刷新后也保留我们设置的显隐列,就需要自己封装了
若依显隐列示例图如下:
源码
效果展示
效果图如下,点击设置显隐列图标,弹框设置界面,点击修改后会保存设置,刷新后按照我们的设置来显示,即缓存版
使用方法
-
- 在合适的位置(一般在表格上方)放置显隐列组件,该组件默认只展示一个图标,图标可自定义
-
- 为表格的字段添加v-if判断,详见下图
- 为表格的字段添加v-if判断,详见下图
-
- 在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", },
],
}
}
-
- 在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-dialog
title="设置展示字段"
:visible.sync="showDialog"
:close-on-press-escape="false"
:width="width"
append-to-body
v-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', // 默认是value
event: '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.defaultCheckList
this.$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>