vue3 el-table回显选中的数据

凉xiao薄

于 2024-08-14 11:56:21 发布

阅读量266

点赞数 10

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/sunyanjing_8949/article/details/141187166

版权

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)
        })
    })
}