avue实现用户本地保存自定义配置字段属性及注意事项（基于tj-vue2-tools）

avue实现用户本地保存自定义配置字段属性（列显隐配置项）及注意事项（基于tj-vue2-tools）

tj-vue2-tools项目地址：https://www.npmjs.com/package/tj-vue2-tools

文档请看项目官方

依赖js-base64

安装依赖

npm install js-base64
1

安装

npm install tj-vue2-tools
1

引入

vue项目在main.js中引入

/*
 * @Description:
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2023-01-28 09:50:23
 */
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from "element-ui";
import Avue from "@smallwei/avue";
import "@smallwei/avue/lib/index.css";
import "element-ui/lib/theme-chalk/index.css";
import "@/assets/css/common.scss";
import zhLocale from "@smallwei/avue/lib/locale/lang/zh";
import enLocale from "@smallwei/avue/lib/locale/lang/en";
import axios from "axios";
import TjTools from "tj-vue2-tools";
import "../node_modules/tj-vue2-tools/tj-vue2-tools.css";
// Vue.config.devtools = true;//安全警告：这将开放Vue结构数据给客户端工具显示，生产环境请设置为false
Vue.use(ElementUI);
// Vue.use(Avue);
Vue.use(Avue, { axios, enLocale, zhLocale });
Vue.config.productionTip = false;
const axiosOption = {
  headers: {},
};
Vue.use(TjTools, { axios: axios, axiosOption: axiosOption });
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

关键引入语句

import TjTools from "tj-vue2-tools";
import "../node_modules/tj-vue2-tools/tj-vue2-tools.css";
Vue.use(ElementUI);
Vue.use(Avue, { axios, enLocale, zhLocale });
const axiosOption = {
  headers: {},
};
Vue.use(TjTools, { axios: axios, axiosOption: axiosOption });
1
2
3
4
5
6
7
8

下面看一段基于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.$loadLocalOption(this, key, "defaults", "crud");
    },
    saveOption() {
      let res = this.$saveLocalOption(this, key, "defaults");
      if (res.code === 0) {
        this.$message.success("配置保存成功");
      }
    },
    resetOption() {
      let res = this.$resetLocalOption(this, key, "reload");
      if (res.code === 0) {
         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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

关键点分析

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

1. :defaults.sync=“defaults”

• 该插件控制属性的关键

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

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

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

插件通过改变key变量reload来初始化列表数据

图1

注意事项

1. 当页面中有异步请求改变option.column属性时，一定要在请求成功后调用loadLocalOption，否则再点开属性配置时，对应的设置项没有同步显示出来
2. :defaults.sync和:key对象一定要在data属性中初始化，否则有异步时现象正如第1条

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

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