vue for循环出来的数据用逗号隔开

最新推荐文章于 2023-09-04 10:09:50 发布

性野喜悲

最新推荐文章于 2023-09-04 10:09:50 发布

阅读量2.1k

点赞数 1

分类专栏： vue 经验分享文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/leng0920/article/details/129407569

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

文章展示了如何在Vue.js的el-table组件中处理后台返回的tableData，特别是当roleList是表格行内的子数组时。通过v-for循环遍历roleList，并使用条件判断在每个角色名之间添加逗号分隔符，以优化表格中所属角色列的显示效果。

摘要由CSDN通过智能技术生成

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>

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