我要评论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>正确的效果图（使用逗号隔开了的效果）
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论