vue 表格单选按钮的实现方式
更新时间：2022年07月28日 08:53:00 作者：岩崎理奈
这篇文章主要介绍了vue 表格单选按钮的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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），然后通过循环中的每一项后台返回的标识符来判断选是或者否。
解决方案
<el-table :data="tableData" border style="width: 100%">
<el-table-column
prop="shyqrdbxm"
label="姓名"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="shyqrdbzjhm"
label="证件号码"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="xb"
label="性别"
width="180"
align="center"
>
<template slot-scope="scope">
<span v-if="scope.row.xb == 1">男</span>
<span v-else>女</span>
</template>
</el-table-column>
<el-table-column
prop="dh"
label="电话"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="poverty"
label="是否脱贫户"
width="180"
align="center"
>
//主要解决方案在这里
<template slot-scope="scope">
<div class="choose">
<el-radio v-model="scope.row.poverty" :label="1"
>是</el-radio
>
<el-radio v-model="scope.row.poverty" :label="0"
>否</el-radio
>
</div>
</template>
</el-table-column>
<el-table-column
prop="poverty"
label=""
width="180"
align="center"
>
<template slot-scope="scope">
<span
v-if="scope.row.poverty == 1"
style="color: #08d3ff; cursor: pointer"
@click="handClickDetail(scope.row)"
>脱贫户信息表</span
>
<span v-if="scope.row.poverty == 0" style="color: #fff"
>脱贫户信息表</span
>
</template>
</el-table-column>
</el-table>数据结构：
tableData:[{
shyqrdbxm:'张三',
shyqrdbzjhm:'32432543534565',
xb:'男',
dh:'13841037895',
poverty:1 //是
},
{
shyqrdbxm:'张三',
shyqrdbzjhm:'32432543534565',
xb:'男',
dh:'13841037895',
poverty:0 //否
}
]以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解vue+vueRouter+webpack的简单实例，非常具有实用价值，需要的朋友可以参考下2017-06-06
下面小编就为大家分享一篇vue中动态绑定表单元素的属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)
文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一些配置项,如格式化表头日期、设置甘特图尺寸、启用只读模式、设置表格列等,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要介绍了Vue切换Tab动态渲染组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文介绍了在Vue3中如何利用生命周期钩子函数和定时器实现访问页面时自动获取数据的方法,这种方法适用于需要在页面加载时即时更新数据显示的场景,感兴趣的可以了解一下2024-11-11
这篇文章主要介绍了详解vue中localStorage的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了详解vue axios用post提交的数据格式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
Vue无法读取HTMLCollection列表的length问题解决
这篇文章主要介绍了Vue无法读取HTMLCollection列表的length问题解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文主要介绍了Vue出现弹出层时禁止底部页面跟随滑动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了Vue snippets插件原理与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
最新评论