avue实现用户本地保存自定义配置字段属性及注意事项

先看一段基于vue-nuxt2的page代码：
代码文件AvueSaveOption.vue

<template>
  <div>
    <p>用户保存自定义表格项</p>
    <avue-crud
      ref="crud"
      :defaults.sync="defaults"
      :option="option"
      :data="data"
      :key="reload"
    >
      <template slot="menuLeft" slot-scope="{ size }">
        <el-button @click="saveOption" type="primary" :size="size">保存配置</el-button>
        <el-button @click="resetOption" type="danger" :size="size">还原配置</el-button>
      </template>
    </avue-crud>
  </div>
</template>
<script>
const key = "avue-option";
export default {
  data() {
    return {
      defaults: {},
      reload: Math.random(),
      data: [
        {
          text1: "内容1-1",
          text2: "内容2-1",
          text3: "110000",
        },
        {
          text1: "内容1-2",
          text2: "内容2-2",
          text3: "120000",
        },
        {
          text1: "内容1-3",
          text2: "内容2-3",
        },
        {
          text1: "内容1-4",
          text2: "内容2-4",
        },
        {
          text1: "内容1-5",
          text2: "内容2-5",
        },
      ],
      option: {
        sortable: true,
        addBtn: false,
        menu: false,
        border: true,
        align: "center",
        column: [
          {
            label: "列内容1",
            prop: "text1",
          },
          {
            label: "列内容2",
            prop: "text2",
          },
          {
            label: "列内容3",
            prop: "text3",
            type: "select",
            props: {
              label: "name",
              value: "code",
            },
            dicUrl: "https://cli.avuejs.com/api/area/getProvince",
          },
        ],
      },
    };
  },
  mounted() {
    this.loadLocalOption();
  },
  methods: {
    loadLocalOption() {
      this.$nextTick(() => {
        let defaults = localStorage.getItem(key);
        if (defaults) {
          this.defaults = JSON.parse(defaults);
        }
        this.$refs.crud.refreshTable(); //刷新表格，使表头同步
        //解决列表统计行不见的问题
        // if (typeof this.$refs.crud != "undefined") {
        //   this.$refs.crud.doLayout();
        // }
      });
    },
    saveOption() {
      localStorage.setItem(key, JSON.stringify(this.defaults));
      this.$message.success("配置保存成功");
      //   console.log(JSON.stringify(this.defaults));
    },
    resetOption() {
      localStorage.removeItem(key);
      this.reload = Math.random();//初始化
      this.$message.success("还原配置成功");
    },
  },
};
</script>
<style scoped lang="scss">
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 12px;
  margin-bottom: 20px;
}
.el-dropdown-menu__item {
  line-height: 1.6;
  font-size: 13px;
}
</style>

关键点分析

1. :defaults.sync=“defaults”
2. :option=“option”
3. :data=“data”
4. :key=“reload”

1. :defaults.sync=“defaults”

• 这是改变option.column属性的关键，通过设置defaults对象，对象中的项对应着option.column对象或数组
• 如上代码 this.defaults.text1 = this.option.column.text1

2. :option=“option”avue属性配置对象

3. :data=“data” 列表数据

4. :key=“reload” crud列表key

通过改变key变量reload来初始化列表数据
如：this.reload = Math.random();//初始化

图1

实现原理分析

• 当用户点击属性配置按钮时（见图1），defaults对象会跟着改变
• 保存配置时按唯一名称（如上代码中的常量key = “avue-option”）把defaults保存在浏览器本地存储中
• 还原时删除本地存储中该唯一名称的值即可
• 加载时，通过该唯一名称查找本地存储，有值后赋给defaults对象
• 通过this.$refs.crud.refreshTable()刷新表格，使表头同步

注意事项

• 当页面中有异步请求改变option.column属性时，一定要在请求成功后调用loadLocalOption，否则再点开属性配置时，对应的设置项没有同步显示出来

option是否可以使用computed计算属性？

option使用vue data属性或vue computed计算属性均可。