html+单选+回显,VUE+elementUI表格多选框实现单选以及数据回显时toggleRowSelection失效问题...
一、多选框单选
>
@select-all="onSelectAll" 全选是触发的事件
@selection-change="selectItem" 单个去勾选时触发的事件(勾选有变化时触发)
@row-click="onSelectOp" 点击那一行数据触发的事件
ref="multipleTable"
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实
注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册
1、@select-all="onSelectAll"
全选是触发自定义的onSelectAll() 函数,把所有选项清空,
this.$refs.multipleTable.clearSelection();clearSelection()这个函数是自带的,比如日期的getFullYear()
2、@selection-change="selectItem"
单个去勾选时触发自定义的selectItem函数
@selection-change事件会默认传行数据进去,用selectItem(rows)的rows接收就好,rows所选行数据的数组
this.$refs.multipleTable.toggleRowSelection(it, true);
toggleRowSelection这个函数需要传某行数据,true表示勾选,false表示不勾选,@selection-change默认是勾选的,也就是说这个事件传进来被选中的数据如果你还是想勾选,那么不需要任何操作,除非你想不勾选,那么就把那条数据用false来去掉勾选。
selectItem这个函数我自定义了,一旦勾选多于一行数据,就把上一个勾选去掉,保留最后一个勾选,用过滤器来过滤,把新的(只有一行数据)的数组赋给自定义的数组,方便调用
3、@row-click="onSelectOp"
点击那一行数据触发的事件默认传点击那行的数据,自定义onSelectOp(row)函数,
用row来接收点击的那行数据,
先把所有的选项清空this.$refs.multipleTable.clearSelection();
再把点击的那行勾选this.$refs.multipleTable.toggleRowSelection(row, true);
把自定义数组清空this.selectlist = [];
把新勾选的数据push进数组this.selectlist.push(row);
methods: {
onSelectAll() {this.$refs.multipleTable.clearSelection();
},
selectItem(rows) {if (rows.length > 1) {var newRows = rows.filter((it, index) =>{if (index == rows.length - 1) {this.$refs.multipleTable.toggleRowSelection(it, true);//这行可以不要return true;
}else{this.$refs.multipleTable.toggleRowSelection(it, false);return false;
}
});this.selectlist =newRows;
}else{this.selectlist =rows;
}
},
onSelectOp(row) {
//this.$refs.multipleTable.clearSelection();不需要this.$refs.multipleTable.toggleRowSelection(row, true);//有这个就够了,因为一旦勾选的内容有变化,那么就会触发selectItem(rows)这个函数
//this.selectlist =[];不需要
//this.selectlist.push(row);不需要
},
二、数据回显toggleRowSelection失效问题
失效例子:
comeBackfromEidt() {
let id= parseInt(this.$route.params.id);this.items.forEach(x =>{if (x.id ==id) {this.$refs.multipleTable.toggleRowSelection(x, true);
}
});
},
我是从这个页面勾选数据然后跳转到另一个页面,然后返回的时候想回显勾选的数据,写了上面代码,发现回显不了!!!
后来查到需要加上$nextTick才可以
以下代码可行:
comeBackfromEidt() {
let id= parseInt(this.$route.params.id);this.items.forEach(x =>{if (x.id ==id) {this.$nextTick(() =>{this.$refs.multipleTable.toggleRowSelection(x, true);
});
}
});
},
或者把$nextTick放在forEach外面也可以。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过。我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom。
因为赋值操作只完成了数据模型的改变并没有完成视图更新
html+单选+回显,VUE+elementUI表格多选框实现单选以及数据回显时toggleRowSelection失效问题...相关推荐
- Easyui 表格中复选框设置单选
Easyui 表格中复选框设置单选 单设置singleSelect:true 是不行的,一定还要在data-options中设置 data-options="singleSelect:tru ...
- elementUI 表格多选框this.$refs.xxx.toggleRowSelection无效
在elementUI官方实例中,multipleSelection代表选中的值,toggleRowSelection(row,selection)方法用于原先已选的值传入进行勾选,row传递被勾选行的 ...
- vue+elementUI三级复选框 checkbox (角色管理)
话不多说直接上代码,直接复制新页面运行就ok,有问题大佬们请留言一起讨论, 效果图 代码如下 <template><el-scrollbar style="height: ...
- element-ui 表格多选框 按条件禁用部分选项
HTML 在 el-table-column type 类型为 selection 组件中,添加 :selectable='方法名' <el-table :data="tableDat ...
- vue elementui table 复选框
1.el-table 中加入事件@selection-change="handleSelectionChange" <el-table-column type=" ...
- vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式 项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
- ElementUi Table复选框回显
ElementUi Table复选框回显 UI代码: <el-table :data="acctSettleHangAccountList" style="widt ...
- vue+element-ui表格实现隐私信息的加密展示和解密操作
vue+element-ui表格实现隐私信息的加密展示和解密操作(AES方法) 注:加密数据和密匙都由后端接口返回,这里仅对加密数据进行解密展示. 解密工具 : crypto-js 地址 : http ...
- vue+elementui实现下拉框及页面刷下
vue+elementui实现下拉框及页面刷下 1.应用场景:首页是一幅地图,地图中有相应的地址,点击相应的地址会跳转到相应的页面 ![在这里插入图片描述](https://img-blog.csdn ...
最新文章
- 营销型网站建设需要注意哪些问题?
- [MVC 4] ActionResult 使用示例
- ML之DR之SVD:SVD算法相关论文、算法过程、代码实现、案例应用之详细攻略
- 手机版ziperello_Ziperello
- 光辉之章事件有哪些常规操作?天谕手游事后的补偿真的很安慰?
- 核心动画05-CAAnimationGroup
- php 父子进程通信,PHP 进程及进程间通信
- 如何在Windows 8中将旧控制面板添加到Metro Start屏幕
- Orchard Core Framework:ASP.NET Core 模块化,多租户框架
- leetcode21 合并两个链表
- 中国卫生健康统计年鉴(2006-2021年)
- 免费https ssl证书freessl.org的申请及配置
- html5制作叮当猫,HTML5 canvas画简单的叮当猫头
- opencv-python 对极几何
- 知识图谱认知智能理论与实战----------第二章 知识图谱模式设计
- 【逆向工程】在PE结构空白区段插入代码
- 分享一组超喜欢的粉色樱花高清壁纸~
- 【Practical】CSDN图片去除水印
- wince buid
- MATLAB-一维插值运算
热门文章
- Git本地已有仓库进行连接Remote库 本地没有仓库进行本地新建仓库连接Remote库
- Win的cmd中文乱码
- java基础不好框架能学会吗_转行Java能学会吗?零基础学习Java的学习路线
- 微信小程序点击button按钮后重置输入框等表单内容
- php中get_featured_posts()是什么意思,php – 在WP_Query中获取WooCommerce特色产品
- c语言怎么独缺非空格字符,C语言-字符串(单个字符)
- MySQL中一个双引号错位引发的血案
- c++ cout头文件_C/C++知识分享:C++常用内置函数你会几个,使用过几次呢?
- openmp 互斥锁 mysql_openMP 函数总结(并行程序设计导论)
- python3字典列表_python3入门(3)---列表、元组、字典、集合详解