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