vue中字典的使用

更新時間：2023年12月11日 09:43:03 作者：~張小八~

這篇文章主要介紹了vue中字典的使用,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

vue中字典的使用

1.引入字典

 dicts: ['order_status','product_type'],

2.表單中使用

select下拉

 <el-form-item label="訂單狀態(tài)" prop="orderStatus">
          <el-select v-model="form.orderStatus" clearable placeholder="請輸入訂單狀態(tài)" :disabled="isDisable" style="width: 100%" >
            <el-option
              v-for="dict in dict.type.order_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

checkbox

 <el-form-item label="是否正式報價單" prop="isFormal">
          <el-radio-group v-model="form.isFormal">
            <el-radio v-for="dict in  dict.type.yes_or_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

3.列表中使用

 <el-table-column label="訂單狀態(tài)" align="center" prop="orderStatus" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus"/>
        </template>
      </el-table-column>

vue項目中字典如何使用（其中一種解決方案）

整體思想：

1、新建一個文件（此處是dict.js），一般是在mixin里面，將所有的字典項以數(shù)組的形式聲明好

2、在create中判斷字典值是否存在于state中，若不存在，則全量引入（保存在store中）

具體實施：

　　1、在dict.js中判斷到字典項不存在時，將所有的字典項逗號分隔形成一個字符串（codes）傳給store的action

　　　　1.1、在store的字典項模塊中定義一個action，該action方法調(diào)用接口獲取所有字典值，將字典項設(shè)置入state中

　　　 1.2、（接口的定義：傳入多個字典項的值，逗號分隔，返回數(shù)據(jù)是各個字典項的值）

　　　　1.3、遍歷返回的值，調(diào)用mutation方法，將多個字典值以對象的形式存入state中，屬性名是字典項的值，屬性值是一個數(shù)組，數(shù)組里面是該字典項的所有字典值對象

　　2、在需要用到字典的地方，引入mapGetters，調(diào)用對應(yīng)GET方法即可使用

// 文件路徑 src/mixins/dict.jsimport { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {　　　　// 所有的字典項
      dictList: [
        'comm.yesOrNo',
        'comm.hasOrNot',
        'comm.gender',
      ]
    };
  },
  computed: {
    ...mapGetters('dict', ['GET_VIEWS_DICLIST'])
  },
  async created() {
    if (this.GET_VIEWS_DICLIST['comm.yesOrNo'] === undefined) {
      this.SET_VIEWS_DICLIST_ACTIONS({
        codes: this.dictList.join(',')
      });
    }
  },
  methods: {
    ...mapActions('dict', ['SET_VIEWS_DICLIST_ACTIONS']),　　 // 該方法根據(jù)字典值獲取字典名稱　　 // val 字典值，例如： 1　　 // list  該字典類型的所有字典項 　　 getLabelName(val, list) {
      const len = list?.length;
      for (let i = 0; i < len; i++) {
        if (list[i].code === String(val)) {
          return list[i].name;
        }
      }
      return '';
    },
  }
};

字典相關(guān)的狀態(tài)管理模塊

// 文件位置 src/store/modules/dict.js// 接口引入import { getViewsDict } from '@/api/base/common';
const getDefaultState = () => {
  return {
    dicList: {} // 業(yè)務(wù)字典
  };
};
const dict= {
  namespaced: true,
  state: getDefaultState(),
  getters: {
    GET_VIEWS_DICLIST: (state) => state.dicList
  },
  actions: {
    SET_VIEWS_DICLIST_ACTIONS({ commit }, codes) {
      return new Promise((resolve, reject) => {
        getViewsDict(codes)
          .then((res) => {
            const obj = {};
            res?.data?.forEach((item) => {
              obj[item.code] = item?.items?.map((val) => {
                return {
                  code: String(val.code),
                  name: val.name
                };
              });
            });
            commit('SET_VIEWS_DICLIST', obj);
            resolve(obj);
          })
          .catch(() => {
            reject();
          });
      });
    }
  },
  mutations: {
    SET_VIEWS_DICLIST: (state, data) => {
      state.dicList = Object.assign({}, state.dicList, data);
    }
  }
};
export default dict;

獲取字典值的接口

// 文件位置  src/api/base/common.jsimport request from '@/api/axios.interceptors';
const viewApi = process.env.VUE_APP_VIEWS_API;
// 獲取業(yè)務(wù)字典
export function getViewsDict(params) {
  return request({
    url: `${viewApi}/dictionary`,
    method: 'get',
    params
  });
}

字典值的使用，使用之前記得引入src/mixins/dict.js內(nèi)容

<strong><el-form-item class="form-item" label="戶籍類型" prop="residentType">
    <el-select
      v-model="formData_base.residentType"
      placeholder="請選擇"
      @change="changeResidentType"
    >
      <el-option
        v-for="item in GET_VIEWS_DICLIST['comm.registerType.resident']"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
</el-form-item></strong>

到此這篇關(guān)于vue中字典的使用的文章就介紹到這了,更多相關(guān)vue字典使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: