如何给“部门”的图标一一对应?

如何给“部门”的图标一一对应?

我们有时会遇到给部门添加图标的情况,在部门数目非常多时,不可能每个都写img标签。这时我们可以使用map方法对部门进行遍历,再对图标进行逐一命名,命名规范可以是“信息中心.png”,也可以是“信息中心.jpg”,总之图标的格式要统一。

1
2
3
4
5
6
<div v-for="item of deptList">
<div @click="toSelPersonPage(item)">
<img :src="item.imgUrl">
{{item.name}}
</div>
</div>

1
2
3
this.deptList.map(o=>{
this.$set(o, 'imgUrl', require('../../../../images/dept/'+o.name+'.png'))
})

this.$set的使用方法:this.$set( target, key, value )

  • target:要更改的数据源(可以是对象或者数组)
  • key:要更改的具体数据
  • value:重新赋的值
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×