场景:

      如题,最近在使用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]

Logo

前往低代码交流专区

更多推荐