我写的这个标题，大家肯定很疑惑，不知道我说的是什么意思，我在这里简单给大家解介绍一下这里的字典，在vue里面，有很多不需要调用接口的固定下拉菜单内容，会把这个下拉菜单全部封装起来，叫做字典，再把字典放到vue原型上，在页面中通过调用，直接使用，这个也是我在项目中，项目经理使用学到的
下面介绍一下怎么使用操作
1，在config下面新建一个 文件
export default {
auditStatus: [
{ id: 0, name: '未提交' },
{ id: 1,name: '审核中' },
{ id: 3,name: '已完成' },
{ id: 2,name: '已驳回' }
],
inboundType: [
{ id: 1, name: '采购入库' },
{ id: 2, name: '租赁入库' },
{ id: 3, name: '原始入库' },
{ id: 4, name: '盘盈入库' }
],
restoreType: [
{ id: 1, name: '领用归还' },
{ id: 2, name: '借用归还' },
{ id: 3, name: '借出归还' }
],
}
2，给 vue 原型 prototype 增加字段属性 dict
在文件下，新建一个文件，并且在中引入
新建文件
import dict from '@/config/dict' //引入dict字典
export default function (Vue) { //把字典放到vue原型上
.$dict = dict
}
文件
import bindPrototype from '@/'
bindPrototype(Vue)
还有一个更简单方法，直接在中操作
import dict from '@/config/dict' //引入dict字典
.$dict = dict
3，新建组件
// 这里的组件是利用 ant-design 组件进行封装的 作为示例
@change="handleChange"
@select="handleSelect"
v-model="selected"
:filterOption="filterOption"
:showArrow="true"
:placeholder="placeholder"
style="width:250px"
>
{{}}
export default {
props: {
clearable: {
default: true,
type: Boolean
},
data: Array,
value: null,
filterOption: {
default: false,
type: Boolean
},
placeholder: String
},
data() {
return {
list: [],
selected: ""
};
},
mounted () { // clearable 是否需要清除即是否显示不限 option，默认为 true
= ? [{ id: '', name: '不限' }, ...] : [...]
=
},
methods: {
handleChange(value) {},
handleSelect(value) {}
},
};
.ant-select-selection{
border:1px solid #fff;
padding: 0 10px;
display: flex;
justify-content: space-between;
}
.childContent {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
background: #ceb8b8;
width: 350px;
height: 150px;
}
注：vue 怎么引入组件
4，在父组件中调用
v-model=""
:data="$"
placeholder="请选择审核状态"
>
v-model=""
:data="$" //只需要改变绑定字典中命名即可
placeholder="请选择审核状态"
>
import selectInput from "@/component/"; // 引入
export default {
components: { // 注册
selectInput
},
data() {
return {
searchCondition:{},
};
},
};
图片展示：
在字典中，一些固定的下拉菜单，会展示在下拉选项中