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组件实现自定义上传
3962 0
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
7112 0
Element el-date-picker 日期选择器详解
|
JavaScript
【vue】 vue-seamless-scroll 无缝滚动依赖
【vue】 vue-seamless-scroll 无缝滚动依赖
2383 1
|
JavaScript 前端开发
javascript数组对象根据id去重的四种方法
Js代码组织结构良好一般都呈现以下五个特点:始终声明我们的依赖、为第三方代码库添加shim(垫片)、定义跟调用应该分离、依赖应该异步加载、模块不应依赖全局变量。
1811 0
|
JavaScript
Vue2日期选择器插件(vue-datepicker-local)
这是一个基于 Vue 的日期选择器组件库,支持年份、月份、日期和时间的选择,并且均可进行范围选择。用户可以自定义日期格式与组件样式。该示例展示了如何配置组件以限制可选日期范围,并提供了相应的代码实现。
2954 0
Vue2日期选择器插件(vue-datepicker-local)
|
前端开发 API
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
1375 6
Vue使用element中table组件实现单选一行
|
资源调度 JavaScript 前端开发
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
这篇文章介绍了在Vue 2项目中如何通过`v-viewer`插件实现图片的预览、切换、缩放、旋转等功能,并提供了插件的安装、配置和使用方法。
5566 0
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...