el-table复选框全部勾选以及勾选回显

简介: el-table复选框全部勾选以及勾选回显

el-table复选框全部勾选以及勾选回显

根据后端回显效果

image.png

复选框全选

<el-table ref="multipleTable"></el-table>
this.$refs.multipleTable.toggleAllSelection();

复选框回显

const {
   
    data } = await getTableData()
data.forEach(item => {
   
   
   if(item.isSelect){
   
     //     根据后端返回是否勾选的字段判断是否勾选
     this.$refs.multipleTable.toggleRowSelection(item)
   }
})

如果回显无效,就添加$nextTick

const {
   
    data } = await getTableData()  // data是tebla的数据
data.forEach(item => {
   
   
   if(item.isSelect){
   
     //     根据后端返回是否勾选的字段判断是否勾选
     this.$nextTick(() => {
   
   
         this.$refs.multipleTable.toggleRowSelection(item)
     })
   }
})

参考

目录
相关文章
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
4003 0
Vue3 复制 copy 功能实现(vue-clipboard3)
Vue3 复制 copy 功能实现(vue-clipboard3)
2377 0
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
7146 0
Element el-date-picker 日期选择器详解
|
JavaScript
【vue】 vue-seamless-scroll 无缝滚动依赖
【vue】 vue-seamless-scroll 无缝滚动依赖
2411 1
|
JavaScript 前端开发
javascript数组对象根据id去重的四种方法
Js代码组织结构良好一般都呈现以下五个特点:始终声明我们的依赖、为第三方代码库添加shim(垫片)、定义跟调用应该分离、依赖应该异步加载、模块不应依赖全局变量。
1823 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10849 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
1399 6
Vue使用element中table组件实现单选一行