ElementUI表格多选框根据后端传来的数据进行数据回显
时间:2019-12-21
本文章向大家介绍ElementUI表格多选框根据后端传来的数据进行数据回显,主要包括ElementUI表格多选框根据后端传来的数据进行数据回显使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前端部分代码:重要的是ref="multipleTable"和this.$refs.multipleTable.toggleRowSelection(需要勾选的行数据,是否勾选)
<el-table :data="items" //这个items是我定义的数据,用于接收后端传来的表格数据(items里面包含多个对象数据),表格遍历显示 :row-key="getRowKey" //多选框时是必要的 @selection-change="selectAjgl" //勾选和取消勾选都会触发这个selectAjgl函数 ref="multipleTable" //可以用来做数据回显打勾!!! > <el-table-column type="selection" :reserve-selection="true" /> //多选框需有一列表格类型为selection,reserve-selection="true"表示翻页了选项保留
onOldAjglId() { httpGet(`/iron/rwgl/selectAjgl/?id=${this.$route.params.id}`) .then(rst => {//查询后端得到以前被选的数据,我后端返回的是数据id集合
this.oldAjglId = rst; if (rst.length > 0) { for (var i = 0; i < rst.length; i++) { for (var j = 0; j < this.items.length; j++) { if (this.oldAjglId[i] === this.items[j].id) {//items里面包含有的都回显打勾
this.$refs.multipleTable.toggleRowSelection(//回显打勾核心,toggleRowSelection的第一个参数是需要打勾的那一行数据,第二个参数表示是否选中,传true
this.items[j], true ); } } } } this.ondamx(rst); }) .catch(e => this.$message.error(e.message)); }, getRowKey(row) { return row.id; },
原文地址:https://www.cnblogs.com/pzw23/p/12077912.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 5分钟入门GANS:原理解释和keras代码实现
- 使用ML 和 DNN 建模的技巧总结
- 医学图像分割模型U-Net介绍和Kaggle的Top1解决方案源码解析
- 机器学习中的音频特征:理解Mel频谱图
- 兄弟,如何淡定地渡过七夕?
- Spring 源码第 9 篇,深入分析 FactoryBean
- PowerBI 动态数据格式 高级版 以及重要通知
- 气哭老板的顶级密钥存放方案,又做了一件蠢事
- 构建没有数据集的辣辣椒分类器,准确性达到96%
- 由 Redis 分布式锁造成的重大事故
- 10分钟搞定 Java 并发队列好吗?好的
- MySQL 案例:关于程序端的连接池与数据库的连接数
- spark和kafka jar包冲突NoSuchMethodError: net.jpountz.lz4.LZ4BlockInputStream
- 聊聊claudb的scripting command
- PHP怎么获取视频总时长的函数方法