SoFunction
Updated on 2025-04-05

Use of dictionary in vue

Use of dictionary in vue

1.Introduce dictionary

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

2. Use in the form

select pull-down

 <el-form-item label="Order Status" prop="orderStatus">
          <el-select v-model="" clearable placeholder="Please enter the order status" :disabled="isDisable" style="width: 100%" >
            <el-option
              v-for="dict in .order_status"
              :key=""
              :label=""
              :value=""
            />
          </el-select>
        </el-form-item>

checkbox

 <el-form-item label="Is it a formal quote?" prop="isFormal">
          <el-radio-group v-model="">
            <el-radio v-for="dict in  .yes_or_no" :key="" :label="">{{}}</el-radio>
          </el-radio-group>
        </el-form-item>

3. Use in the list

 <el-table-column label="Order Status" align="center" prop="orderStatus" >
        <template slot-scope="scope">
          <dict-tag :options=".order_status" :value=""/>
        </template>
      </el-table-column>

How to use dictionary in vue project (one of the solutions)

Overall Thought:

1. Create a new file (here is), usually in the mixin, and declare all dictionary items in the form of an array.

2. In create, determine whether the dictionary value exists in state. If it does not exist, then the full amount is introduced (save in store)

Specific implementation:

1. When it is determined that the dictionary item does not exist, separate all dictionary items into a string (codes) and pass it to the store action.

1.1. Define an action in the dictionary item module of the store. The action method calls the interface to obtain all dictionary values ​​and sets the dictionary item into the state.

1.2. (Definition of interface: Pass the values ​​of multiple dictionary items, separated by commas, and return the data is the values ​​of each dictionary item)

1.3. Iterate over the returned value, call the mutation method, and store multiple dictionary values ​​into the state as an object. The attribute name is the value of the dictionary item, the attribute value is an array, and the array is all dictionary value objects of the dictionary item.

2. Where dictionary is needed, introduce mapGetters and call the corresponding GET method to use it.

// File path src/mixins/ { mapGetters, mapActions } from 'vuex';export default {
  data() {
    return {// All dictionary items      dictList: [
        '',
        '',
        '',
      ]
    };
  },
  computed: {
    ...mapGetters('dict', ['GET_VIEWS_DICLIST'])
  },
  async created() {
    if (this.GET_VIEWS_DICLIST[''] === undefined) {
      this.SET_VIEWS_DICLIST_ACTIONS({
        codes: (',')
      });
    }
  },
  methods: {
    ...mapActions('dict', ['SET_VIEWS_DICLIST_ACTIONS']), // This method gets the dictionary name based on the dictionary value // val dictionary value, for example: 1 // list all dictionary items of this dictionary type 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 '';
    },
  }
};

Dictionary-related state management module

// File location src/store/modules/// Interface import { getViewsDict } from '@/api/base/common';const getDefaultState = () => {
  return {
    dicList: {} // Business Dictionary  };
};
const dict= {
  namespaced: true,
  state: getDefaultState(),
  getters: {
    GET_VIEWS_DICLIST: (state) => 
  },
  actions: {
    SET_VIEWS_DICLIST_ACTIONS({ commit }, codes) {
      return new Promise((resolve, reject) => {
        getViewsDict(codes)
          .then((res) => {
            const obj = {};
            res?.data?.forEach((item) => {
              obj[] = item?.items?.map((val) => {
                return {
                  code: String(),
                  name: 
                };
              });
            });
            commit('SET_VIEWS_DICLIST', obj);
            resolve(obj);
          })
          .catch(() => {
            reject();
          });
      });
    }
  },
  mutations: {
    SET_VIEWS_DICLIST: (state, data) => {
       = ({}, , data);
    }
  }
};
export default dict;

Interface to get dictionary values

// File location src/api/base/ request from '@/api/';const viewApi = .VUE_APP_VIEWS_API;
// Get business dictionaryexport function getViewsDict(params) {
  return request({
    url: `${viewApi}/dictionary`,
    method: 'get',
    params
  });
}

Use of dictionary values,Remember to import src/mixins/ content before using

<strong><el-form-item class="form-item" label="Registration Type" prop="residentType">
    <el-select
      v-model="formData_base.residentType"
      placeholder="Please select"
      @change="changeResidentType"
    >
      <el-option
        v-for="item in GET_VIEWS_DICLIST['']"
        :key=""
        :label=""
        :value=""
      ></el-option>
    </el-select>
</el-form-item></strong>

This is the end of this article about the use of dictionaries in vue. For more related content on vue dictionary usage, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!