vue使用v-for遍历map,获得对应的 key 和 value

ゞ 浴缸里的玫瑰 2022-10-30 13:25 612阅读 0赞

场景:

  1. 如题,最近在使用vue开发页面过程中,遇到需要表格中,使用v-for遍历map获取对应的keyvalue
  2. 首先来展示优秀后端(没错,也是在下)处理返回的数据JSON格式(返回数据已脱敏处理,请放心食用)
  3. {"total":1,"rows":[{"sysRightMap":{"10":"值A,值B","40":"值1,值2"}}]}

页面需要通过v-for in 的方式遍历取出返回对象中的sysRightMap对象里面的值,分别得到对应的key和value,

页面遍历代码:

  1. <el-table-column label="我是列名">
  2. <template slot-scope="scope">
  3. <div v-if="!!scope.row.sysRightMap">
  4. <div v-for="(value,key) in scope.row.sysRightMap"
  5. :key="key">
  6. <!-- key 对应的就是 sysRightMap 中的key值,如:10,40 -->
  7. <!-- value 对应的就是 sysRightMap 中的value值,如:值A,值B / 值1,值2 -->
  8. <!-- 取值方式用 {
  9. {key}} -->
  10. </div>
  11. </div>
  12. </template>
  13. </el-table-column>
  14. tips: 随手转发记录一个小技巧,你的博客总数将会 + 1 \[/doge\]

发表评论

表情:
评论列表 (有 0 条评论,612人围观)

还没有评论,来说两句吧...

相关阅读