ElementUI 表格组件（el-table）默认选中

<!-- 注意定义 ref ，后续操作表格选中要用到 -->
<el-table ref="dt" :data="list" @select="handleSelect" @select-all="handleSelectAll">
    <!-- 定义 type="selection" 复选框列 -->
    <el-table-column type="selection" width="80" align="center"></el-table-column>

    <!-- 省略其它 column ... -->
</el-table>

export default {
    data() {
        return {
            list: [],
            selected: [], // 已选中的数据，存储已选中的 id
            page: { index: 1, size: 20 }
        }
    },
    created() {
        // 注意：先获取已选中的数据，再获取列表数据
        this.getSelected().then(this.getList)
    },
    methods: {
        // 通过接口获取列表数据
        async getList() {
            this.list = await $http.get('/api/list', { ...this.page })

            // 回显，注意：需要等表格渲染完成，否则无效，可以使用 $nextTick
            this.$nextTick(() => {
                // 先取消所有选中
                this.$refs.dt.clearSelection();

                // 然后比对数据，找出已选择的行，然后选中
                this.list.forEach(x => {
                    let index = this.selected.findIndex(s => s === x.id)
                    if (index != -1) {
                        this.$refs.dt.toggleRowSelection(x);
                    }
                });
            })
        },

        // 通过接口获取已选中的数据
        async getSelected() {
            this.selected = await $http.get('/api/selected')
        },

        // 单选
        handleSelect(selection, row) {
            let index  = this.selected.findIndex(x => x == row.id)
            if (index !== -1) {
                this.selected.splice(index, 1)
            } else {
                this.selected.push(row.id)
            }
        },

        // 全选
        handleSelectAll(selection) {
            // 根据 selection 的 length 判断是全选还是取消全选
            if (selection.length > 0) {

                // 为了防止 push 重复的 id，所以先判断 id 是否已经在 selected 中，如果没有则 push
                selection.forEach(s => {
                    let index = this.selected.findIndex(x => x == s.id);
                    if (index == -1) {
                        this.selected.push(s.id);
                    }
                })
            } else {
                // 由于存在分页，所以全选和取消全选都是针对当前页面的
                // 所以取消全选时，只能删除当前页面的 id 数据，不能把 selected 全清空
                this.list.forEach(item => {
                    const index = this.selected.findIndex(i => i.id == item.id)
                    if (index !== -1) {
                        this.selected.splice(index, 1)
                    }
                })
            }
        }
    }
}