el-table怎么回显勾选的数据

### Element-UI `el-table` 组件实现数据回显勾选

在使用 `el-table` 组件时，如果希望实现在页面加载或特定条件下自动勾选某些行，则可以通过编程方式调用 `toggleRowSelection` 方法来完成这一需求。具体来说，在获取到需要展示的数据之后，遍历这些数据并与之前保存的选择项对比，找到匹配项后调用此方法。

下面是一个简单的例子说明如何实现：

#### 数据准备阶段
假设服务器端返回了一个包含所有记录以及已经被选择过的ID列表的对象结构如下所示：

{
    "data": [
        {"id": 1, "name": "张三"},
        {"id": 2, "name": "李四"}
    ],
    "selectedIds": [1]
}

#### Vue实例初始化部分
当组件挂载完成后立即执行一次请求以取得上述格式化的初始状态，并将其存储起来供后续逻辑处理。

mounted() {
    this.fetchData();
},
methods: {
    fetchData(){
        // 模拟异步获取数据的过程
        setTimeout(() => {
            const response = { /* 上述JSON对象 */ };
            
            this.tableData = response.data;
            this.selectedRowsByIds(response.selectedIds);
        }, 1000);  
    },
    
    selectedRowsByIds(selectedIds){
        let that = this;

        selectedIds.forEach(id => {
            var row = that.tableData.find(item=>item.id === id);

            if(row !== undefined){
                that.$refs.multipleTable.toggleRowSelection(row,true)[^1];
            }
        });
    }
}

在此基础上还需要确保模板中有相应的属性绑定以便于触发该函数：

<template>
    <!-- ... -->
    <el-table ref="multipleTable" :data="tableData">
        <!-- 列定义省略 -->
    </el-table>
</template>

<script>
export default {
    data () {
        return {
            tableData:[]
        }
    }
};
</script>

通过这种方式可以在每次重新加载页面或是其他情况下恢复用户之前的选项记忆[^2]。