el-table 多选默认选中（根据返回的id给数据加默认选中状态）

向明天乄2024-11-04 12:26

前言

el-table是我们最常用的展示数据的方式，但是有时候需要用到多选来选择数据，新增数据的时候还好，选中状态都是正常的，但是修改就遇到问题，需要对这个已经选择过的数据加上默认的选中状态，本次就是解决这个问题。通过ref这个来解决。

javascript 复制代码

 setDefaultSelection() {
        // 用的时候将defaultSelectedIds 替换成你的id
        const defaultSelectedIds = [1, 3, 5]; // 示例默认选中的行的 id
        this.$nextTick(() => {
            if (this.$refs.singleTable) {
                this.$refs.singleTable.clearSelection();
                this.xiaoquAll.forEach(item => {
                    if (defaultSelectedIds.includes(item.id)) {
                        this.$refs.singleTable.toggleRowSelection(item, true);
                    }
                });
            }
        });
    },

我用的选择是多选 @select="handleCurrentChange" 这个参数实在e-table里边加的，就没必要展示全部代码了

singleTable：el-table的ref

this.xiaoquAll：这个是我的el-tabl后端返回的总数据。

基本上所有的后端返回的数据都是有一个id的，要是没有用就用index来代替，没有id方便

将这个setDefaultSelection函数在你成功获取到数据之后调用，

注意点：setDefaultSelection函数的使用时机，一定要是有singleTable这个ref生效之后在调用，要是这个ref没有生效，这个函数就没有意义了。