iview 将table的selection多选变单选方法
相信很多使用iview的朋友,在用到table,都会遇到需要使用selection的场景,但是总会有那么一个产品汪,觉得iview的单选效果不好,非要用selection的来做单选,那么下面这个方法就能解决这个问题:
{
title: '选中',
align:'center',
key: 'checkBox',
render:(h,params)=>{
return h('div',[
h('Checkbox',{
props:{
value:params.row.checkBox
},
on:{
'on-change':(e)=>{
console.log(e)
this.tableData.forEach((items)=>{ //先取消所有对象的勾选,checkBox设置为false
this.$set(items,'checkBox',false)
});
this.tableData[params.index].checkBox = e; //再将勾选的对象的checkBox设置为true
}
}
})
])
}
},
iview 将table的selection多选变单选方法的更多相关文章
- jq check 复选变单选。
$("input[type='checkbox']").on("click",function(e){ var $checked = $("input ...
- vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
- React使用antd Table生成层级多选组件
一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...
- vue2.0实现在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- vue2.0在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- iview中table里嵌套i-switch、input、select等
iview中table内嵌套 input render:(h,params) => { return h('Input',{ props: { value:'', size:'small', } ...
- 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table
基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367
- 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化
之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...
- iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件
这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该 ...
随机推荐
- mysql优化一之查询优化
这一篇笔记的mysql优化是注重于查询优化,根据mysql的执行情况,判断mysql什么时候需要优化,关于数据库开始阶段的数据库逻辑.物理结构的设计结构优化不是本文重点,下次再谈 查看mysql语句的 ...
- 跟我一起学opencv 第五课之图像的混合
*理论-线性混合操作 g(x) = (1-α)f0(x)+αf1(x) α的取值范围位0-1之间 f0(x)为图像1,f1(x)表示第二张图像 α是混合系数 g(x)是生成的图像,对每一个像素 ...
- android学习笔记--检测是否为wifi环境
ConnectivityManager cm = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE); // 获取 ...
- 装箱问题的CPLEX求解
装箱问题(Bin Packing Problem) 装箱问题即搬家公司问题.一个搬家公司有无限多的箱子,每个箱子的承重上限为W,当搬家公司进入一个房间时,所有物品都必须被装入箱子,每个物品的重量为wi ...
- SmartSql Zookeeper分布式配置
安装 SmartSql.ZooKeeperConfig Install-Package SmartSql.ZooKeeperConfig Demo string connStr = "192 ...
- c#中如何使用到模糊查询
c#中如何使用到模糊查询,先举个最简单实用的例子,可在vs控制台应用程序中输出: 定义实体类: public class Student { public int ...
- 解决mysql时区与系统时区不一致问题。异常:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.
异常信息:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone ...
- linux的一些命令,面试经常碰到的
1 查询所有java进程ps -A | grep java解释一下这个命令的意思,ps 是查看系统当前进程的命令,参数 -A(注意,是大写,linux中是区分大小写的)是显示所有程序,| 这个是管道符 ...
- 2.python中self详解(程序适用于python3版本)
先介绍下Python中的类和实例面向对象最重要的概念就是类(class)和实例(instance),类(class)是抽象的模板,比如学生这个抽象的事物,可以用一个Student类来表示.而实例是根据 ...
- asp.net Core HttpClient 出现Cannot access a disposed object. Object name: 'SocketsHttpHandler' 的问题。
ASP.NET Core 部署在Centos 中 偶尔出现 One or more errors occurred. (Cannot access a disposed object.Object n ...