插件: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")
})
}