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

安装

npm install tj-vue2-tools

引入

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");

关键引入语句

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 });

下面看一段基于vue-nuxt2的page代码：

代码文件AvueSaveOption.vue

<template><div><p>用户保存自定义表格项</p><avue-crudref="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>