相信很多使用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. [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause 的问题 MySQL

    问题:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregate ...

  2. Python存储系统(Redis)

    存储系统数据缓存一般会使用三个模块:Mongodb,redis,memcache.其中memcache是轻量级缓存,只能将数据保存到内存中,redis可以配置数据保存在内存还是硬盘. 其主要用途有:不 ...

  3. 图解 HTTP 的缓存机制 | 实用 HTTP

    题图:by @joewakeford 一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文头(Header),大多数 Http ...

  4. 《前端之路》之 operator 操作符的优先级

    Github传送门,欢迎 Star - - Github地址,欢迎 Star

  5. springboot~Mongodb的集成与使用

    说说springboot与大叔lind.ddd的渊源 Mongodb在Lind.DDD中被二次封装过(大叔的.net和.net core),将它当成是一种仓储来使用,对于开发人员来说只公开curd几个 ...

  6. 微信小程序 Request faild 请求后台失败

    首先确认你的域名和ssl证书是否配置完成. 如果后台没有进行域名配置,先去配置一个有效的备案的自持https的域名. 1.建议备案超过24小时 2.ssl证书可以直接采用阿里云的免费证书   进行ss ...

  7. 红透半边天的VR(虚拟现实)产业

    目前在做一些与AR与VR相关的工作,特此把一些个人总结的普及性概念与各位朋友共享. 一: 什么是虚拟现实(VR)技术? 虚拟现实技术是一种可以创建和体验虚拟世界的计算机仿真系统它利用计算机生成一种模拟 ...

  8. 基本 SQL 之增删改查(一)

    上篇文章,我们介绍了数据的基本 DDL 语句,你应当具备基本的创建数据库.数据表的 SQL 语句,以及表字段的基本数据类型的熟知. 那么本篇就来总结总结大家日常最频繁接触到的 DDM 语句,也就是基本 ...

  9. 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU开发那些事 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是飞思卡尔i.MX RT系列微控制器相关知识. 飞思卡尔半导体(现恩智浦半导体)于2017年开始推出的i.MX RT系列开启了高性能MC ...

  10. [转]Windows10中Virtualbox没办法选择和安装64位的Linux系统

    本文转自:https://blog.csdn.net/strivenoend/article/details/78290325 明明在公司的WIN7系统中使用Virtualbox就可以安装64位的Ub ...