最近在开发一个流动性能，表单外面有单选框抉择，并且能够勾销抉择，在网上找到了办法并总结了一下，我参考的是这位前辈的代码。上面是我的代码：
<!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()办法。