相信很多使用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. Nginx的配置文件nginx.conf解析

    安装openresty的nginx.conf配置文件 0.ng运行的用户和用户组 1.ng进程数,设置为CPU总核心数 2.ng错误日志 3.进程文件,有时ng启动不了,将进程文件删除即可. 4.单进 ...

  2. vue和mpvue

    一.mixins的理解     vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况 ...

  3. NodeJs之邮件(email)发送

    NodeJs之邮件(email)发送 一,介绍与需求 1.1,介绍 1,Nodemailer简介 Nodemailer是一个简单易用的Node.js邮件发送插件 github地址 Nodemailer ...

  4. TypeScript|Angular踩坑笔记

    今天按照Angular官网玩了下demo程序,踩了个小坑,记录下. TypeScript可以将变量申明为自定义类型,同时也不对该类型进行检查(不像C#,如果没有这个类型会报错) 比如下面这样: 如果我 ...

  5. 使用Atlas进行元数据管理之Atlas简介

    背景:笔者和团队的小伙伴近期在进行数据治理/元数据管理方向的探索, 在接下来的系列文章中, 会陆续与读者们进行分享在此过程中踩过的坑和收获. 元数据管理系列文章: [0] - 使用Atlas进行元数据 ...

  6. tensorflow用pretrained-model做retrain

    最近工作里需要用到tensorflow的pretrained-model去做retrain. 记录一下. 为什么可以用pretrained-model去做retrain 这个就要引出CNN的本质了.C ...

  7. 第一册:Lesson 123.

    原文:A trip to Australia. question:Who is the man with the beard? Look ,Scott.This is a photograph I t ...

  8. Asp.Net MVC Https设置

    1.   IIS设置 1.1 创建SSL证书 点击左侧菜单栏顶部,点击“功能视图”里的“服务器证书”: 点击“创建自动签名证书”创建自动签名证书: 1.2 设置SSL证书 点开网站,在“功能视图”里点 ...

  9. 常用vi编辑器命令行

    游标控制: h 游标向左移 j 游标向下移 k 游标向上移 l(or spacebar) 游标向右移 w 向前移动一个单词 b 向后移动一个单词 e 向前移动一个单词,且游标指向单词的末尾 ( 移到当 ...

  10. Biorhythms(poj1006+中国剩余定理)

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 117973   Accepted: 37026 Des ...