Iview列表实现单选按钮

骑猪看日落 2023-05-31 02:38 19阅读 0赞

let self = this
    columns.push({
    	title:"选择",
    	width: 80,
    	align: 'center',
    	fixed: 'left',
    	render: (h, params) => {
    		return h('Radio', {
    		   props: {
    		    	value: params.row.isselected 
    		   },
    		   on: {
    		    	input: () => {
    		    	self.deviceList.map(item => {
    		    		item.isselected = false;
    		    	});
    		    	self.deviceList[params.index].isselected = true;
    		    }
    		 }
    	})
    	}
    })

**实现效果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70][]

**选择时**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70 1][]

参考[https://www.jianshu.com/p/92bfd1f692b7][https_www.jianshu.com_p_92bfd1f692b7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70]: /images/20230531/c67cace3de41436597000377224fd281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70 1]: /images/20230531/a6885f9e069449ebb0b41b39f7533c93.png
[https_www.jianshu.com_p_92bfd1f692b7]: https://www.jianshu.com/p/92bfd1f692b7

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关修改单选按钮按钮位置

要点 android:button="@null" android:drawableRight="@drawable/news\_msg\_notice\_radio"

古城微笑少年丶/ 2023年10月05日 10:42/ 0 赞/ 78 阅读

相关 Iview列表实现单选按钮

let self = this columns.push({ title:"选择", width: 80, align: 'cen

骑猪看日落/ 2023年05月31日 02:38/ 0 赞/ 20 阅读

相关 Html 单选按钮多选按钮下拉列表

![20200611185106301.PNG][] <form action="" method="get"> 姓名：<input type="te

比眉伴天荒/ 2023年02月17日 03:18/ 0 赞/ 16 阅读

相关 RadioButton单选按钮

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

冷不防/ 2022年09月26日 03:15/ 0 赞/ 261 阅读

相关 angularjs单选和复选按钮

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8">

朴灿烈づ我的快乐病毒、/ 2022年07月14日 22:51/ 0 赞/ 297 阅读

相关 iview使用Radio实现单选

1、前端页面iview中代码model.isUsePlan为绑定数据，changeModel是点击单选按钮时触发事件 <RadioGroup v-model="mo

╰+攻爆jí腚メ/ 2022年02月18日 14:51/ 0 赞/ 717 阅读

相关 layui + vue实现list单选列表

根据下拉框选择内容，动态生成单选列表。 html <div class="layui-col-xs3 layui-col-sm3 layui-col-md2 t

太过爱你忘了你带给我的痛/ 2021年12月15日 19:37/ 0 赞/ 445 阅读

相关单选按钮和复选框

单选按钮（RadioButton）和复选按框（CheckBox）都是很常用的组件，尤其是在对话框中。单选按钮（RadioButton）是一种具有排他性的选择组件，用户每一次只能

╰+哭是因爲堅強的太久メ/ 2021年11月29日 11:30/ 0 赞/ 580 阅读

相关 IView table单选实现

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一纸荒年。/ 2021年11月26日 22:04/ 0 赞/ 364 阅读

相关 iview table 单选/多选获取选中行

单选/多选获取选中行单选通过设置属性 highlight-row，可以选中某一行。当选择时，触发事件 @on-current-change，可以自定义操作

超、凢脫俗/ 2021年09月17日 20:28/ 0 赞/ 1295 阅读