vue for循环出来的数据实现用逗号隔开
更新时间：2024年10月16日 09:08:45 作者：性野喜悲
HTML（HyperText Markup Language）是用于创建网页的标准标记语言,正确的HTML编码和结构对于网页的正确显示至关重要,当HTML代码正确无误时,网页的效果图将与设计师的预期相符,反之则可能出现布局错乱、样式失效等问题
vue for循环出来的数据用逗号隔开
- HTML：
//tableData为后台返回的数据，roleList为表格对象中的子数组
<el-table :data="tableData" style="width: 100%">
<el-table-column
label="所属角色"
min-width="160"
show-overflow-tooltip
>
<template slot-scope="scope">
<span
v-for="(item, index) in scope.row.roleList"
:key="index"
>{{item.roleName}}</span
>
</template>
</el-table-column>
</el-table>效果图（实际是两个角色）
- 正确的HTML：
//tableData为后台返回的数据，roleList为表格对象中的子数组
<el-table :data="tableData" style="width: 100%">
<el-table-column
label="所属角色"
min-width="160"
show-overflow-tooltip
>
<template slot-scope="scope">
<span
v-for="(item, index) in scope.row.roleList"
:key="index"
>{{scope.row.roleList.length-1!==index?item.roleName+'，':item.roleName}}</span
>
</template>
</el-table-column>
</el-table>正确的效果图（使用逗号隔开了的效果）
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue计算属性的使用和vue实例的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了详解vue填坑之解决部分浏览器不支持pushState方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
uni-app 使用编辑器创建vue3 项目并且运行的操作方法
这篇文章主要介绍了uni-app 使用编辑器创建vue3 项目并且运行的操作方法,目前uniapp 创建的vue3支持 vue3.0 -- 3.2版本 也就是说setup语法糖也是支持的，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了浏览器事件循环（结合vue nextTicket）的实现方法,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue3中watch和watchEffect实战梳理，watch和watchEffect都是vue3中的监听器，但是在写法和使用上是有区别的。下文介绍他们之间的方法及区别，需要的朋友可以参考一下2022-07-07
本文主要介绍了Element框架el-tab点击标签页时再渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这是一个实现平滑滚动的函数,可以让页面在滚动到指定位置时产生缓动效果,本文给大家介绍了如何在在Vue页面中实现平滑滚动功能,<BR>,文中详细的代码讲解供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue组件中的数据传递方法,非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要介绍了auto-vue-file:一个自动创建vue组件的包,需要的朋友可以参考下2019-04-04
本文主要介绍了vue3 解决数据更新而视图未更新问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-10-10
最新评论