vue使用v-for遍历map,获得对应的 key 和 value
场景:
如题,最近在使用vue开发页面过程中,遇到需要表格中,使用v-for遍历map获取对应的key和value。
首先来展示优秀后端(没错,也是在下)处理返回的数据JSON格式(返回数据已脱敏处理,请放心食用)
{"total":1,"rows":[{"sysRightMap":{"10":"值A,值B","40":"值1,值2"}}]}
页面需要通过v-for in 的方式遍历取出返回对象中的sysRightMap对象里面的值,分别得到对应的key和value,
页面遍历代码:
<el-table-column label="我是列名">
<template slot-scope="scope">
<div v-if="!!scope.row.sysRightMap">
<div v-for="(value,key) in scope.row.sysRightMap"
:key="key">
<!-- key 对应的就是 sysRightMap 中的key值,如:10,40 -->
<!-- value 对应的就是 sysRightMap 中的value值,如:值A,值B / 值1,值2 -->
<!-- 取值方式用 {
{key}} -->
</div>
</div>
</template>
</el-table-column>
tips: 随手转发记录一个小技巧,你的博客总数将会 + 1 \[/doge\]
还没有评论,来说两句吧...