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

news2025/10/31 16:03:06

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-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>