一、场景:根据后端返回的不用状态码,页面显示不同的内容,重点在于内容可以是自定义。
html部分: <text class="status-{{ statemap[item.status].style }} ">{{ statemap[item.status].name }}</text>
js定义在data中的自定义初始值:
statemap: {
001: { name: '待确认', style: 'red' },
002: { name: '已确认', style: 'blue' },
003: { name: '已关单', style: 'gray' },
004: { name: '已驳回', style: 'red' },
005: { name: '已作废', style: 'blue' },
006: { name: '发货中', style: 'gray' },
}
这样,只要跟后端协定好这些状态码分别表示什么内容就好了。
二、往后端返回的json数组每一项新添加几个字段
const newData = res.data.map(n => Object.assign(n, { goodsId: n.id }));
三、后端返回的Json数组,想push到新的数组里,但是要更换一下key,vue不变
假如res.data.list = [{ id: "991", depotCode: "001", depotName: "测试11"},{id: "992", depotCode: "002", depotName: "测试22"}]
const arr = [];
const { depotName: label, id: value } = res.data.list
arr.push({ label, value })
console.log(arr) // [{ label: '测试11', value: 991}, { label: '测试22, value: 992}]
注: 参考es6变量解构:
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"