脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue for循环出来的数据用逗号隔开

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>

正确的效果图（使用逗号隔开了的效果）

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论