vue for循環(huán)出來的數(shù)據(jù)實現(xiàn)用逗號隔開
更新時間：2024年10月16日 09:08:45 作者：性野喜悲
HTML（HyperText Markup Language）是用于創(chuàng)建網(wǎng)頁的標(biāo)準標(biāo)記語言,正確的HTML編碼和結(jié)構(gòu)對于網(wǎng)頁的正確顯示至關(guān)重要,當(dāng)HTML代碼正確無誤時,網(wǎng)頁的效果圖將與設(shè)計師的預(yù)期相符,反之則可能出現(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>正確的效果圖（使用逗號隔開了的效果）
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue計算屬性的使用和vue實例的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了詳解vue填坑之解決部分瀏覽器不支持pushState方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
uni-app 使用編輯器創(chuàng)建vue3 項目并且運行的操作方法
這篇文章主要介紹了uni-app 使用編輯器創(chuàng)建vue3 項目并且運行的操作方法,目前uniapp 創(chuàng)建的vue3支持 vue3.0 -- 3.2版本 也就是說setup語法糖也是支持的，需要的朋友可以參考下2023-01-01
瀏覽器事件循環(huán)與vue nextTicket的實現(xiàn)
這篇文章主要介紹了瀏覽器事件循環(huán)（結(jié)合vue nextTicket）的實現(xiàn)方法,需要的朋友可以參考下2019-04-04
vue3中watch和watchEffect實戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽器，但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07
Element框架el-tab點擊標(biāo)簽頁時再渲染問題的解決
本文主要介紹了Element框架el-tab點擊標(biāo)簽頁時再渲染問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這是一個實現(xiàn)平滑滾動的函數(shù),可以讓頁面在滾動到指定位置時產(chǎn)生緩動效果,本文給大家介紹了如何在在Vue頁面中實現(xiàn)平滑滾動功能,<BR>,文中詳細的代碼講解供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue組件中的數(shù)據(jù)傳遞方法,非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
詳解auto-vue-file:一個自動創(chuàng)建vue組件的包
這篇文章主要介紹了auto-vue-file:一個自動創(chuàng)建vue組件的包,需要的朋友可以參考下2019-04-04
本文主要介紹了vue3?解決數(shù)據(jù)更新而視圖未更新問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10