快捷導(dǎo)航

vue3 el-table回顯選中的數(shù)據(jù)方式

更新時(shí)間：2025年12月03日 10:01:25 作者：涼xiao薄

文章主要介紹了如何在Vue 3中使用el-table組件實(shí)現(xiàn)數(shù)據(jù)回顯和選中功能,HTML部分展示了如何構(gòu)建表格行,而JavaScript部分則通過`item`變量表示每一行的數(shù)據(jù),并通過布爾值`true`來標(biāo)記選中狀態(tài),作者通過個(gè)人經(jīng)驗(yàn)分享,希望能為其他開發(fā)者提供參考和支持

vue3 el-table回顯選中的數(shù)據(jù)

html部分

<el-table ref="multipleTableRef" :data="matchLists" stripe style="width: 100%;" @selection-change="handleSelectionChange" row-key="source_id" empty-text="暫無數(shù)據(jù)">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="" width="65" label="序號(hào)" align="center">
        <template #default="scope">
            <span>{{scope.$index + 1}}</span>
        </template>
    </el-table-column>
    <el-table-column prop="title" label="比賽名稱" :show-overflow-tooltip="true" align="center"></el-table-column>
    <el-table-column prop="" width="220" label="操作" align="center">
        <template #default="scope">
            <div class="table_btn fcolor-black" @click="addRow(scope.row)">添加</div>
            <div class="table_btn fcolor-red" @click="removeRow(scope.row)">刪除</div>
        </template>
    </el-table-column>
</el-table>

js部分

let matchLists = ref([
    {source_id: 1, title: '比賽1'},
    {source_id: 2, title: '比賽2'},
    {source_id: 3, title: '比賽3'},
    {source_id: 4, title: '比賽4'},
    {source_id: 5, title: '比賽5'},
])
let source_ids = ref([1,2,3]) //默認(rèn)選中前三條數(shù)據(jù)
let multipleTableRef = rf('') //el-table的ref屬性值，必須要定義
let multipleSelection = ref([]) //存儲(chǔ)選中數(shù)據(jù)的集合

//多選
function handleSelectionChange(val) {
    multipleSelection.value = val
}
//初始化
function init() {
    //回顯選中的數(shù)據(jù)
    nextTick(()=>{
        multipleSelection.value = matchLists.value.filter(item => 
            source_ids.some(row => row === item.source_id)
        );
        multipleSelection.value.forEach(item=>{
            multipleTableRef.value.toggleRowSelection(item,true)
        })
    })
}

本文的中心代碼就是

multipleTableRef.value.toggleRowSelection(item,true)

item 表示該子項(xiàng)，true 表示選中。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽，具名插槽，作用域插槽是vue中常用的三個(gè)插槽，這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別，感興趣的小伙伴可以了解一下
2023-08-08
vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝
這篇文章主要為大家介紹了vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
element select實(shí)現(xiàn)組件虛擬滾動(dòng)優(yōu)化
本文主要介紹了element select實(shí)現(xiàn)組件虛擬滾動(dòng)優(yōu)化，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
Vue簡(jiǎn)介、引入、命令式與聲明式編程詳解
原生開發(fā)和Vue開發(fā)的模式和特點(diǎn),我們會(huì)發(fā)現(xiàn)是完全不同的,這里其實(shí)涉及到兩種不同的編程范式:命令式編程和聲明式編程,下面這篇文章主要給大家介紹了關(guān)于Vue簡(jiǎn)介、引入、命令式與聲明式編程的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue組件中實(shí)現(xiàn)嵌套子組件案例
這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)
這篇文章主要介紹了Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容-rules-案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
Vue.js組件使用props傳遞數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue.js組件使用props傳遞數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
vue引入swiper插件的使用實(shí)例
本篇文章主要介紹了vue引入swiper插件的使用實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
Vue3+TS實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限的示例詳解
當(dāng)我們?cè)陂_發(fā)一個(gè)大型的前端應(yīng)用時(shí),動(dòng)態(tài)路由權(quán)限是一個(gè)必不可少的功能,本文將介紹如何使用Vue 3和TypeScript來實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限,希望對(duì)大家有所幫助
2024-01-01