vue for循環(huán)出來的數(shù)據(jù)實現(xiàn)用逗號隔開
更新時間：2024年10月16日 09:08:45 作者：性野喜悲
HTML（HyperText Markup Language）是用于創(chuàng)建網頁的標準標記語言,正確的HTML編碼和結構對于網頁的正確顯示至關重要,當HTML代碼正確無誤時,網頁的效果圖將與設計師的預期相符,反之則可能出現(xiàn)布局錯亂、樣式失效等問題
vue for循環(huán)出來的數(shù)據(jù)用逗號隔開
- HTML：
//tableData為后臺返回的數(shù)據(jù)，roleList為表格對象中的子數(shù)組
<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為后臺返回的數(shù)據(jù)，roleList為表格對象中的子數(shù)組
<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>正確的效果圖（使用逗號隔開了的效果）
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue之vue.$set()方法源碼案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue組件解析之如何自定義彈窗組件ByDialog問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue中使用vue-seamless-scroll插件實現(xiàn)列表無縫滾動效果
這篇文章主要介紹了vue中使用vue-seamless-scroll插件無縫滾動,支持上下左右無縫滾動，單步滾動停留時間，以及水平方向的手動切換，需要的朋友可以參考下2022-06-06
vue省市區(qū)三聯(lián)動下拉選擇組件的實現(xiàn)
本篇文章主要介紹了vue省市區(qū)三聯(lián)動下拉選擇組件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
今天小編就為大家分享一篇vue表單自定義校驗規(guī)則介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了使用vue實現(xiàn)計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue3項目如何配置按需自動導入API組件unplugin-auto-import
這篇文章主要介紹了vue3項目如何配置按需自動導入API組件unplugin-auto-import問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue跳轉同一路由報錯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決antd日期選擇組件,添加value就無法點擊下一年和下一月問題
這篇文章主要介紹了解決antd日期選擇組件,添加value就無法點擊下一年和下一月問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在Vue中，修飾符處理了許多DOM事件的細節(jié)，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理2022-10-10