相信很多使用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. SpringBoot之GZip压缩,HTTP/2,文件上传,缓存配置

    1 设置应用端口以及context # HTTP Server port server.port=8080 # Make the application accessible on the given ...

  2. 从壹开始微服务 [ DDD ] 之五 ║聚合:实体与值对象 (上)

    前言 哈喽,老张是周四放松又开始了,这些天的工作真的是繁重,三个项目同时启动,没办法,只能在深夜写文章了,现在时间的周四凌晨,白天上班已经没有时间开始写文章了,希望看到文章的小伙伴,能给个辛苦赞

  3. 版本控制工具——Git常用操作(上)

    本文由云+社区发表 作者:工程师小熊 摘要:用了很久的Git和svn,由于总是眼高手低,没能静下心来写这些程序员日常开发最常用的知识点.现在准备开一个专题,专门来总结一下版本控制工具,让我们从git开 ...

  4. git使用教程指南

    前言  Git是一个开源的分布式版本控制系统.其核心就在于版本控制.  在实际编码过程中,我们往往会忘记上次对文件的修改内容.若是刚刚修改的还好说,撤销操作即可.但若这是你昨天做的修改并关闭了IDE呢 ...

  5. WPF ObservableCollection 异步调用问题

    问题介绍 当ObservableCollection列表被UI线程占用时,如果在异步线程中调用ObservableCollection,会弹出以下异常: 问题分析 我们使用一个viewModel,在V ...

  6. flex 实例 豆瓣手机端布局实现

    0.最终成品

  7. java----静态代理

    静态代理没啥好说的,直接上代码 package com.yk.aop.staticproxy; import org.junit.jupiter.api.Test; //1.接口 public int ...

  8. poi控制简单的word

    官方model网址:http://svn.apache.org/repos/asf/poi/trunk/src/examples/src/org/apache/poi/xwpf/usermodel/e ...

  9. Canvas 绘图学习笔记2

    1 绘制文本 fillText(string,x,y,maxWidth)  //填充试绘制文本 strokeText(string,x,y,maxWidth) 画线试绘制文本 设置字体样式: cont ...

  10. node.js解析微信消息推送xml格式加密的消息

    之前写过一个解密json格式加密的,我以为xml的和json的差不多,是上上个星期五吧,我的同事也是在做微信公众号里面的消息推送解密,发现好像只能使用xml加密格式的发送到服务器,我们去年也做过企业微 ...