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]