您现在的位置是：网站首页> 编程资料编程资料

vue 表格单选按钮的实现方式_vue.js_

2023-05-24 315人已围观

简介 vue 表格单选按钮的实现方式_vue.js_

vue实现表格单选按钮

return{ orderNo:'', columns: [ { title:'', key: '', render:(h,params) => { let orderNo = params.row.orderNo; let orderNoShow = true; if(this.orderNo == orderNo){ orderNoShow = true; } else { orderNoShow = false } let self = this; return h('radio',{ props:{ label: '', value: orderNoShow }, on:{ 'on-change': ()=>{ self.orderNo = orderNo } } }) } } ] }

表格中有两个单选按钮切换互不影响

项目场景

提示：这里简述项目相关背景：

问题描述

提示：这里描述项目中遇到的问题：

点击是否时互不影响，然后表格的每一行也互不影响。

原因分析

了解element-ui中的单选按钮的机制，是跟否是一组，都是通过v-model来进行判断，然后就相当于是一个布尔值（true/false），然后通过循环中的每一项后台返回的标识符来判断选是或者否。

解决方案

 //主要解决方案在这里

数据结构：

       tableData:[{              shyqrdbxm:'张三',              shyqrdbzjhm:'32432543534565',              xb:'男',              dh:'13841037895',              poverty:1 //是          },          {              shyqrdbxm:'张三',              shyqrdbzjhm:'32432543534565',              xb:'男',              dh:'13841037895',              poverty:0 //否          }        ]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章: