0
var item = {
    id: 1,
    role: ['1', '2'],
    name: ''
};
var options = [{
    roleid: '1',
    label: '黄金糕'
}, {
    roleid: '2',
    label: '双皮奶'
}, {
    roleid: '3',
    label: '蚵仔煎'
}];

item的role对应option的roleid,如何获取的role对应的label集合的信息,赋值到name里面?js的方法
这更像是模拟一个select多选的方法

nans0423 631
2019-06-10 提问

查看全部 3 个回答

1

已采纳

解决方法便如上面那位所述,但这里吾辈还是想说一些问题

  • 模拟 select > options 应该使用 Map 而非 Array,因为 Map 是有序且高效的(根据 key 获取 value
  • 使用 Set 而非 Array 存放 id 列表,因为在多次选中时可能会存在重复
  • 既然有了 role 用来存 option 列表,那么显示值 name 应该是绑定到 role 上的,一旦发生变化立即重新计算(例如 vuejs 中的 watch
const item = {
  id: 1,
  role: new Set([1, 2]),
  name: '',
}
const options = new Map()
  .set(1, '黄金糕')
  .set(2, '双皮奶')
  .set(3, '蚵仔煎')

function calcName(role) {
  return role.map(k => options.get(k)).join(',')
}

const obj = new Proxy(item, {
  set(_, k, v) {
    if (k === 'role') {
      Reflect.set(_, 'name', calcName(Array.from(v)))
    }
    Reflect.set(_, k, v)
  },
})

item.name = calcName(Array.from(item.role))
console.log(obj.name)
obj.role = [1]
console.log(obj.name)
// 此处并未实现深度监听
obj.role.add(2)
console.log(obj.name)

推荐答案

2
item.name = []
item.role.forEach(role => {
  let option = options.find(op => op.roleid === role)
  option && item.name.push(option.label)
})

推广链接