likes
comments
collection
share

使用element-ui中的el-radio(单选框)组件实现选中和取消选中功能

作者站长头像
站长
· 阅读数 14

最近在开发一个活动功能,表单里面有单选框选择,并且可以取消选择,在网上找到了方法并总结了一下,我参考的是这位前辈的代码。下面是我的代码:

<!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()方法。