vue3 el-table回显选中的数据方式
作者：凉xiao薄
文章主要介绍了如何在Vue 3中使用el-table组件实现数据回显和选中功能,HTML部分展示了如何构建表格行,而JavaScript部分则通过`item`变量表示每一行的数据,并通过布尔值`true`来标记选中状态,作者通过个人经验分享,希望能为其他开发者提供参考和支持
vue3 el-table回显选中的数据
html部分
<el-table ref="multipleTableRef" :data="matchLists" stripe style="width: 100%;" @selection-change="handleSelectionChange" row-key="source_id" empty-text="暂无数据">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="" width="65" label="序号" 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]) //默认选中前三条数据
let multipleTableRef = rf('') //el-table的ref属性值，必须要定义
let multipleSelection = ref([]) //存储选中数据的集合
//多选
function handleSelectionChange(val) {
multipleSelection.value = val
}
//初始化
function init() {
//回显选中的数据
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 表示该子项，true 表示选中。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。