【Avue】Avue 的avue-crud列表如何持久化本地,可以自动隐藏列,切换之后也可以正常使用

Avue项目开发,使用Avue每次列表,选择隐藏列,刷新又还原了,头疼

话不多说,上代码,先说明,百分比有用

实现原理,将隐藏列的属性,存入浏览器缓存,然后刷新,先从浏览器缓存获取之前设置的属性

Avue 最新版(旧版本也ok,也试过),是本人已成功的案例,没办法的事情有客户有这一类的需求;
找相关示例又少的可怜,唉,自己研究了一下参数,自行设置了。
例如下图:
在这里插入图片描述
上代码

//持久化
    watch: {
    	//监听 用户是否点击切换的 显隐列,点击了存储至缓存
      option: {
        handler(newVal) {
          //设置路由-将本页面的路由+自行设置的模块名称 作为KEY, 存储当前页面的已设置的列
          localStorage.setItem(this.$route.path + "-order", JSON.stringify(newVal.column))
        },
        deep: true
      },
      data() {
        // 对 Table 进行重新布局,这个经常使用到,主要是自动重置页面结构
        this.$nextTick(() => {
          this.$refs.crud.$refs.table.doLayout()
        })
      }
    },
    created() {
      //设置路由-这里的key要和监听的key一致,要不然获取不了
      this.persistence(this.$route.path + "-order");
    },
    methods: {
 		/**
       * 设置缓存
       * @param path
       */
      persistence(path) {
        let option = localStorage.getItem(path);
        if (option != null && option != "" && option != undefined) {
          this.option.column = JSON.parse(option);
        }
      }
    }

示例图:
在这里插入图片描述
在这里插入图片描述
自行去实现即可

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值