相信很多使用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多选变单选方法的更多相关文章

  1. jq check 复选变单选。

    $("input[type='checkbox']").on("click",function(e){ var $checked = $("input ...

  2. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  3. React使用antd Table生成层级多选组件

    一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...

  4. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  5. vue2.0在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  6. iview中table里嵌套i-switch、input、select等

    iview中table内嵌套 input render:(h,params) => { return h('Input',{ props: { value:'', size:'small', } ...

  7. 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

    基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367

  8. 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  9. iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件

    这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该 ...

随机推荐

  1. mysql数据库打开连接时报错:1251

    考试之前由于一直在做团队项目导致疏忽了数据库 等到今天来连接做考试的时候发现报错:1251 网上的解释以及解决方法: 今天下了个 MySQL8.0,发现Navicat连接不上,总是报错1251: 原因 ...

  2. 难以理解的AQS(上)

    在一篇博客中,我们看了下CopyOnWriteArrayList的源码,不是很难,里面用到了一个可重入的排他锁: ReentrantLock,这东西看上去和Synchronized差不多,但是和Syn ...

  3. Android项目目录结构模板以及简单说明【简单版】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 开发Android项目的时候,一般都是一边开发一边根据需求创建目录(包.module),那么我呢就根据以往的项目经验,整理出一个比较 ...

  4. Maven-常用插件

    罗列笔者认为比较有用的一些maven打包插件,方便后续查阅 spring-boot-maven-plugin springboot自带的maven插件,可用于简单的JAR/WAR方式打包,官方地址为h ...

  5. Spring异常分析

    异常报错 2019-01-14 10:40:18.427 ERROR 11776 --- [ost-startStop-1] o.s.b.w.e.t.TomcatStarter : Error sta ...

  6. 关于单链表的增删改查方法的递归实现(JAVA语言实现)

    因为在学习数据结构,准备把java的集合框架底层源码,好好的过一遍,所以先按照自己的想法把单链表的类给写出来了; 写该类的目的: 1.练习递归 2.为深入理解java集合框架底层源码打好基础 学习的视 ...

  7. Docker+SpringBoot远程发布

    Docker+SpringBoot远程发布 发布成功后启动: docker run -di --name demo1.1 -p 8080:8085 demo:1.0 docker run 命令大全:h ...

  8. Centos7下用FastDFS搭建图片服务器

    1.所用到的工具: 1.FastDFS_v5.05.tar 2.fastdfs-nginx-module_v1.16.tar 3.libfastcommonV1.0.7.tar 4.nginx-1.1 ...

  9. html和css的使用方法以及样式

    布局步骤 第一步: 清除默认样式第二步: 划分模块第三步: 设置模块的大小以及位置第四步: 划分下一级模块 html和css 引入网页头像 <link rel="shortcut ic ...

  10. SAP 没有激活HUM功能照常可以使用Handling Unit

    SAP 没有激活HUM功能照常可以使用Handling Unit 笔者所在的项目上的公司间STO的流程里,发货公司在做PGI之后系统自动触发收货公司的inbound delivery单据,发货公司发出 ...