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
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
1739 0
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
3479 0
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
6676 0
Element el-date-picker 日期选择器详解
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10361 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
1153 6
Vue使用element中table组件实现单选一行
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
741 0
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
3800 1