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

前言

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没有生效,这个函数就没有意义了。

相关推荐
用户3802258598241 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo521003 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag5 分钟前
报错 400 和405解决方案
vue.js·spring boot
普通程序员9 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
白杨木影子被拉长10 分钟前
多状态映射不同样式(scss语法)
vue.js·uni-app
山有木兮木有枝_11 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子13 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a16 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心16 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq18 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端