<template>
<div style="padding:50px">
<div v-for="(item,index) in list" :key="index">
<span style="width:100px;display:inline-block;font-size:18px;">{{item.name}}</span>
<Radio size="large" ref="radio" @click.native="changeRadioStatus(index,item)"></Radio>
</div>
</div>
</template>
<script>
export default {
name: "cancelRadio",
data() {
return {
list:[
{name:'1',isChecked:false},
{name:'2',isChecked:false},
{name:'3',isChecked:false},
{name:'4',isChecked:false},
{name:'5',isChecked:false},
{name:'6',isChecked:false},
{name:'7',isChecked:false},
{name:'8',isChecked:false},
{name:'9',isChecked:false},
{name:'10',isChecked:false},
{name:'11',isChecked:false},
{name:'12',isChecked:false},
],
}
},
methods:{
changeRadioStatus(index,item) {
this.$refs.radio[index].currentValue = !this.$refs.radio[index].currentValue
console.log("获取到选中的状态和名字",item.name,this.$refs.radio[index].currentValue)
}
}
}
</script>
<style scoped>
>>> .ivu-radio-inner::after {
position: absolute;
width: 12px;
height: 12px;
left: 2px;
top: 2px;
border-radius: 6px;
display: table;
border-top: 0;
border-left: 0;
content: ' ';
background-color: #1dc138;
}
>>> .ivu-radio-checked .ivu-radio-inner {
border-color: #1dc138;
}
</style>
1、使用原生的点击事件
2、通过属性currentValue来控制是否选中