应用场景:有些列表太多,需要根据个人习惯显示哪些列表
我这里加了到保存到本地缓存,优点:刷新列表不会重置
代码
这里加了嵌套
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :localSrt="localSrt" :columns="columns"></right-toolbar>
v-if 判断是否显示
v-if="columns[0].visible"
缓存的k
localSrt :'appGoods',
默认值
// 列信息 columns: [ { key: 0, label: `用户昵称`, visible: true }, { key: 1, label: `用户手机号`, visible: true }, { key: 2, label: `商品类型`, visible: true }, { key: 3, label: `商品名称`, visible: true }, ],
显示/隐藏弹框
RightToolbar
props: { localSrt: { type: String, }, }<el-dialog v-dialog-drag :title="title" :visible.sync="open" append-to-body> <el-button style="margin-bottom: 10px" size="mini" @click="localStorage()">保存</el-button> <el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange" ></el-transfer> </el-dialog>
created() { // 显隐列初始默认隐藏列 for (let item in this.columns) { if (this.columns[item].visible === false) { this.value.push(parseInt(item)); } } },
// 右侧列表元素变化 dataChange(data) { for (let item in this.columns) { const key = this.columns[item].key; this.columns[item].visible = !data.includes(key); } }, // 打开显隐列dialog showColumn() { this.open = true; }, //添加缓存 localStorage() { let goodsData = JSON.stringify(this.columns) localStorage.setItem(this.localSrt, goodsData) this.open = false; this.$modal.msgSuccess("提交成功"); }
加载页面查询缓存
created() { this.localStorage(); }methods: { localStorage() { //查询缓存的localSrt let newGoodsData = localStorage.getItem(this.localSrt) //转成JSON let goodsObj = JSON.parse(newGoodsData) //赋值 if (goodsObj!=null){ this.columns = goodsObj } },}
心得:这个可以根据用户加缓存,不能用户显示的都不同,个人感觉这种弹框不好看 这个是不是更好看,大家觉得呢