vue for循环出来的数据实现用逗号隔开-牛翰网

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>