下拉框数据字典应用案例

插件：elemenu-ui中的el-select/el-option

以图内饰为例

---

代码展示 

v-for----------对insideColorList列表数据动态渲染遍历

步入正题：

• 在data数据中对insideColorList进行定义

insideColorList: cacheDataKeyString("INSIDE_COLOR"),

• 在script中引入

import {cacheDataKeyString, cacheDateName} from '@/assets/js/utils';

---

在页面表格展示的时候

• 在自定义组件上定义：dropCol

• 在data数据中定义prop进行传递数据

 

• 在methods中调用数据字典方法

setStatusShow(status, dictionary) { return ( "<span>" +cacheDateName(dictionary, status) + "</span>" ); },

• 在页面加载表格数据的方法中拿到item的insideColorText其中为item.insideColor和 "INSIDE_COLOR"，为setStatusShow的传递的参数

apiVehicle.getVehicleList(data).then(res => {
                let num1 = 0, num2 = 0;
                let list = res.data.data.list;
                if (list && list.length > 0) {
                    list.forEach(item => {
                        num1 += Number(item.price);
                        num2 += Number(item.grossWeight);
                        item.insideColorText = this.setStatusShow(item.insideColor, "INSIDE_COLOR")
                        item.outsideColorText = this.setStatusShow(item.outsideColor, "OUTSIDE_COLOR")
                        item.specificationsText = this.setStatusShow(item.specifications, "SPECIFICATIONS")
                    })
                }