{"total":1,"rows":[{"sysRightMap":{"10":"值A,值B","40":"值1,值2"}}]}

                            <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}} -->
                                </template>
                            </el-table-column>

背景：前端接收后端返回的list集合，并将该集合展示在页面。 //例如： let _list = [{"name":"小一", "age":10, "id":1},{"name":"小二", "age":15, "id":2},{"name":"小三", "age":9, "id":3}] 方案一，直接在HTML代码中 使用 v-for、Object. key 、Object. value 来渲染页面 <template> <div v-for=" map in _list"> vue 中定义的 map 对象 map : { name : 'xxx' } 接口回显 map 格式的数据 data :{ key : value } 都可以通过以下方式拿到 key 和 value 的值 for(const key in map ){ console.log(" key 名称是："+ key +", key 的值是："+ map [ key ]) 在这个例子中，我们 使用 了ES6的解构语法来获取 Map 的 key 和 value 。在v-for指令中，我们将 value 放在前面， key 放在后面，这样就可以正确地获取 Map 的 key 和 value 了。 注意，在v-for指令中，我们需要 使用 : key 属性来指定每个li元素的 key 值，这样 Vue 才能正确地跟踪每个元素的状态。 ### 回答2： Vue 是一款流行的JavaScript框架，它提供了一种简单而直观的方式来操作DOM，并将应用程序的数据与其视图保持同步。 Vue 遍历 map 并获取 key 和 value ，是在 Vue 实现数据绑定的过程中非常常见的操作。下面介绍如何 使用 Vue 遍历 map 并获取 key 和 value 。 首先，我们应该了解一下在JavaScript中如何创建和 遍历 一个 Map 。在JavaScript中， Map 是一种非常有用的数据类型，可以将键映射到值上，而不需要像对象那样具有字符串键的限制。我们可以 使用 空的 Map ()构造函数创建一个新的空 Map 。接下来 使用 set()方法可以添加一个键值对到 Map 中。最后，我们可以 使用 for...of循环来 遍历 Map 获取键和值。 下面是具体步骤： 1.创建一个 Map ，并向其中添加一些键值对： let my Map = new Map () my Map .set(' key 1', ' value 1') my Map .set(' key 2', ' value 2') my Map .set(' key 3', ' value 3') 2. 使用 v-for指令 遍历 Map ： <template> <li v-for="( value , key ) in my Map " : key =" key "> Key : {{ key }}, Value : {{ value }} </template> <script> export default { data() { return { my Map : new Map ([ [' key 1', ' value 1'], [' key 2', ' value 2'], [' key 3', ' value 3'] </script> 使用 v-for指令，我们可以 使用 `( value , key ) in my Map `快速 遍历 Map 中所有的键值对，` value ` 对应 键值对中的值，` key ` 对应 键值对中的键。通过在li元素中绑定 key 属性，我们可以让 Vue 自动为每个列表项提供唯一的 key 。这有助于 Vue 轻松地进行更新DOM。 上述代码 使用 的是ES6语法，如果需要兼容IE等旧浏览器，在 使用 过程中需对其进行转换。 总之， 使用 Vue 进行 Map 遍历 并获取 key 和 value 非常简单。与普通的JavaScript语法相比， Vue 数据绑定的优雅语法和语法糖使代码更加直观易懂，提高了开发效率。 ### 回答3： Vue 是一种用于构建用户界面的渐进式JavaScript框架。在 Vue 中，我们可以 使用 v-for指令来 遍历 数组或对象。但是如果你需要 遍历 一个 Map 对象，该怎么办呢？本文将介绍如何在 Vue 中 遍历 Map 对象并获取其 key 和 value 。 一、创建一个 Map 对象 在 Vue 中 遍历 Map 对象之前，我们需要先创建一个 Map 对象。以下是一个简单的例子： let my Map = new Map (); my Map .set(' key 1', ' value 1'); my Map .set(' key 2', ' value 2'); my Map .set(' key 3', ' value 3'); 二、在 Vue 中 使用 v-for指令 遍历 Map 对象 我们可以 使用 v-for指令来 遍历 Map 对象。以下是一个示例： <template> <li v-for="( value , key ) in my Map " : key =" key "> {{ key }}: {{ value }} </template> 在上面的代码中，我们 使用 v-for指令对my Map 对象进行 遍历 。在v-for指令中，我们 使用 括号括起来的 value 和 key 来获取 Map 对象中的 value 和 key 。在模板中，我们可以 使用 {{ key }}和{{ value }}的方式来获取它们。 三、 遍历 Map 对象的原理 在ES6中， 遍历 Map 对象可以 使用 以下方法： for (let [ key , value ] of my Map ) { console.log( key + ' = ' + value ); 我们可以 使用 相同的方法在 Vue 中 遍历 Map 对象。在v-for指令后面，我们 使用 括号括起来的 value 和 key 来获取 Map 对象中的 value 和 key 。 在 Vue 中， 使用 v-for指令可以 遍历 数组和对象。但是如果你需要 遍历 Map 对象并获取其 key 和 value ，可以 使用 括号括起来的 value 和 key 来实现。了解了这些基础知识，我们可以更轻松地在 Vue 中操作 Map 对象。