使用element-ui中的el-radio（单选框）组件实现选中和取消选中功能
站长
· 阅读数 15
最近在开发一个活动功能，表单里面有单选框选择，并且可以取消选择，在网上找到了方法并总结了一下，我参考的是这位前辈的代码。下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用element-ui中的el-radio（单选框）组件实现选中和取消选中功能</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<el-button type="primary" @click="isShow = true">请选择优惠活动</el-button>
<el-dialog title="请选择优惠活动" :close-on-click-modal="false" :visible.sync="isShow" width="731px">
<div class="model-body">
<el-form ref="form" :model="activityInfo" label-width="80px" label-position="top">
<el-form-item label="活动1">
<el-radio-group v-model="activityInfo.radio1" :key="radioKey1">
<el-radio v-for="item in moneyOffList" :key="item.id" :label="item.id"
@click.native.prevent="changeRadio(item.id, 1)">{{ item.activityName }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动2">
<el-radio-group v-model="activityInfo.radio2" :key="radioKey2">
<el-radio v-for="item in buyPurchaseList" :key="item.id" :label="item.id"
@click.native.prevent="changeRadio(item.id, 2)">{{ item.activityName }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动3">
<el-radio-group v-model="activityInfo.radio3" :key="radioKey3">
<el-radio v-for="item in couponList" :key="item.id" :label="item.id"
@click.native.prevent="changeRadio(item.id, 3)">{{ item.activityName }}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="footer">
<!-- 方法返回一个数组, 对象中属性名的集合 -->
<span class="left1">已选 {{Object.keys(activityInfo).length}} 个活动</span>
<el-button class="cancel-style" size="small" @click="isShow = false">取 消</el-button>
<el-button type="primary" @click="confirmActivit">确 认</el-button>
</div>
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
// 显示或隐藏弹层
isShow: false,
// form表单
activityInfo: {},
// 活动1
moneyOffList: [],
// 活动2
buyPurchaseList: [],
// 活动3
couponList: [],
// 控制单选框点击选中和取消
radioKey1: false,
// 控制单选框点击选中和取消
radioKey2: false,
// 控制单选框点击选中和取消
radioKey3: false,
// 模拟后端返回的数据
activityList: [
{
"activityName": "测试1",
"marketingType": "1",
"id": "1564166823610396674",
"activityType": "5",
},
{
"activityName": "测试2",
"marketingType": "1",
"id": "1564190540612743169",
"activityType": "5",
},
{
"activityName": "测试3",
"marketingType": "2",
"id": "1564194283531370497",
"activityType": "4",
},
{
"activityName": "测试4",
"marketingType": "2",
"id": "1564201347171319810",
"activityType": "4",
},
{
"activityName": "测试5",
"marketingType": "2",
"id": "1566712633057349634",
"activityType": "3",
},
{
"activityName": "测试6",
"marketingType": "2",
"id": "1567399000281288706",
"activityType": "3",
},
],
}
},
mounted() {
},
watch: {
isShow: {
handler(newName, oldName) {
if (newName) {
// 区分各种活动类型
this.activityList.forEach(item => {
if (item.marketingType == 1 && (item.activityType == '1' || item.activityType == '2' || item.activityType == '5')) {
this.moneyOffList.push(item)
} else if (item.marketingType = 2 && item.activityType == '4') {
this.buyPurchaseList.push(item)
} else if (item.marketingType = 2 && item.activityType == '3') {
this.couponList.push(item)
}
});
} else {
// 关闭弹层之后初始化
this.moneyOffList = [];
this.buyPurchaseList = [];
this.couponList = [];
this.activityInfo = {};
}
},
}
},
methods: {
// 点击单选框操作
changeRadio(val, number) {
// 如果未选中则单选框高亮，否则单选框取消选中
this.activityInfo['radio' + number] = this.activityInfo['radio' + number] == val ? '' : val;
this['radioKey' + number] = !this['radioKey' + number];
// 去掉空值,删除对象中的某一个属性和属性值
if (!this.activityInfo['radio' + number]) {
delete this.activityInfo['radio' + number]
}
},
// 点击确定发送请求
confirmActivit() {
// Object.values, 获取对象中的属性值,返回一个数组
let activityIds = Object.values(this.activityInfo);
// js中的数组去掉空值(点击单选框的时候已经做了空值处理，这一步可以不要)
activityIds = activityIds.filter(function (s) {
return s && s.trim();
});
console.log(activityIds, '传给后端的参数');
}
}
})
</script>
</body>
</html>通过这个需求我学到了单选框取消选中的方法，学习了vue对对象中的属性动态赋值，学习了Object.keys()方法和Object.values()方法。