vue中字典的使用
作者：~张小八~
这篇文章主要介绍了vue中字典的使用,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
vue中字典的使用
1.引入字典
dicts: ['order_status','product_type'],
2.表单中使用
select下拉
<el-form-item label="订单状态" prop="orderStatus">
<el-select v-model="form.orderStatus" clearable placeholder="请输入订单状态" :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="订单状态" 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里面，将所有的字典项以数组的形式声明好
2、在create中判断字典值是否存在于state中，若不存在，则全量引入（保存在store中）
具体实施：
1、在dict.js中判断到字典项不存在时，将所有的字典项逗号分隔形成一个字符串（codes）传给store的action
1.1、在store的字典项模块中定义一个action，该action方法调用接口获取所有字典值，将字典项设置入state中
1.2、（接口的定义：传入多个字典项的值，逗号分隔，返回数据是各个字典项的值）
1.3、遍历返回的值，调用mutation方法，将多个字典值以对象的形式存入state中，属性名是字典项的值，属性值是一个数组，数组里面是该字典项的所有字典值对象
2、在需要用到字典的地方，引入mapGetters，调用对应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']), // 该方法根据字典值获取字典名称 // 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 '';
},
}
};字典相关的状态管理模块
// 文件位置 src/store/modules/dict.js// 接口引入import { getViewsDict } from '@/api/base/common';
const getDefaultState = () => {
return {
dicList: {} // 业务字典
};
};
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;
// 获取业务字典
export function getViewsDict(params) {
return request({
url: `${viewApi}/dictionary`,
method: 'get',
params
});
}字典值的使用，使用之前记得引入src/mixins/dict.js内容
<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>到此这篇关于vue中字典的使用的文章就介绍到这了,更多相关vue字典使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！