[Avue] How to persist Avue's avue-crud list locally, can automatically hide columns, and can be used normally after switching

Not much to say, let’s go to the code and explain first, the percentage is useful

The principle of implementation is to store the attributes of the hidden columns in the browser cache, and then refresh them to obtain the previously set attributes from the browser cache

The latest version of Avue (the old version is also ok, I also tried it) is a successful case of myself. There is no way to do it. There are customers who have this kind of demand; there are very few related
examples. Alas, I have studied the parameters myself. I set it myself.
For example, the following picture:

above code

//持久化
    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);
        }
      }
    }

Example diagram:


You can implement it by yourself