IView table单选实现

ゝ一纸荒年。 2021-11-26 22:04 363阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJZnVydHVyZQ_size_16_color_FFFFFF_t_70]  
步骤一：<Table ref=“modalTable”:columns=“modalColumns” :data=“testData” border stripe>  
步骤二：  
data() \{  
return \{  
currentChoose: ‘0’,  
modalColumns: \[  
\{  
title: ‘选择’,  
key: ‘id’,  
width: 70,  
align: ‘center’,  
render: (h, params) => \{  
let id = [params.row.id][];  
let flag = false;  
if (this.currentChoose === id) \{  
flag = true  
\} else \{  
flag = false  
\}  
let self = this  
return h(‘div’, \[  
h(‘Radio’, \{  
props: \{  
value: flag  
\},  
on: \{  
‘on-change’: () => \{  
self.currentChoose = id;  
\}  
\}  
\})  
\])  
\}  
\},  
\{title: ‘姓名’, key: ‘name’\},  
\{title: ‘手机号’, key: ‘contactPhone’\},  
\]  
\}\}

## 注意：testData数据中要包含id字段且包含id值数值类型的数据 ##

作者：carry\_carrie  
来源：CSDN  
原文：[https://blog.csdn.net/qq\_35858002/article/details/88710244][https_blog.csdn.net_qq_35858002_article_details_88710244]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJZnVydHVyZQ_size_16_color_FFFFFF_t_70]: /images/20211126/45816ce684f3488bbfdc8f55c39f5ca0.png
[params.row.id]: http://params.row.id
[https_blog.csdn.net_qq_35858002_article_details_88710244]: https://blog.csdn.net/qq_35858002/article/details/88710244

发表评论取消回复

表情：

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

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

相关阅读

相关 web前端-Vue Element table多选表格实现单选

Element table，多选单选主要使用的是ElementUI多选表格中的方法 1、事件 select 事件当用户手动勾选数据行的 Checkbox 时触发的事件

素颜马尾好姑娘i/ 2023年10月03日 11:38/ 0 赞/ 45 阅读

相关 el-table selection多选框实现单选效果

1、首先把全选框给隐藏掉 ![在这里插入图片描述][20191009152000750.png] thead { .el-table-colu

柔光的暖阳◎/ 2023年06月05日 15:00/ 0 赞/ 60 阅读

相关 Iview列表实现单选按钮

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

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

相关 Element table 表格实现单选

创建表格添加 @select-all=“selectAll” @select=“selectAnalysis” ref=“multipleTable” <el-ta

左手的ㄟ右手/ 2022年09月13日 04:19/ 0 赞/ 237 阅读

相关 iview使用Radio实现单选

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

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

相关 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 阅读

相关 iview表格Table表头动态化实现

业务逻辑：根据日期，时间筛选跨度固定为3个月，获取数据，表格动态按月份展示，看图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

朴灿烈づ我的快乐病毒、/ 2021年09月17日 03:02/ 0 赞/ 1537 阅读

相关 element-ui的table表格实现单选效果

效果图 ![在这里插入图片描述][20200718112856622.gif] 安装Element-ui npm i element-ui -S 引入

布满荆棘的人生/ 2021年09月01日 07:31/ 0 赞/ 625 阅读

相关 iview table表格中复选框改单选

computed: { columns() { return [ {

川长思鸟来/ 2021年07月26日 18:13/ 0 赞/ 615 阅读