vue for循环出来的数据实现用逗号隔开
作者：性野喜悲
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>正确的效果图（使用逗号隔开了的效果）
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。