全选-复选框/单选

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号(ID:itclanCoder)

背景

在一些后台管理系统中,对于全选/复选框是一个很常见的需求

虽然有现成的组件,但依旧需要对数据进行处理

实例效果

具体效果,可点击文末下方阅读原文

实例代码

<template>
    <div class="el-checkbox-wrap">
        <div class="select-all">
             <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="formParams.checkAll"
              @change="handleCheckAllChange"
              >全选
            </el-checkbox>
        </div>
        <div>
            <el-checkbox-group
              v-model="formParams.checkeddotNames"
              @change="handleCheckeddotNamesChange"
            >
              <el-checkbox
                v-for="item in checkOptionsData"
                :label="item.code"
                :key="item.code"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
    export default {
        name: "checkbox",
        data() {
            return {
                formParams: {
                    isIndeterminate: false, // 设置 indeterminate 状态,只负责样式控制
                    checkAll: true, // 默认全选,true表示全选,false,不全选
                    checkeddotNames: [], // 绑定默认选中
                    code: "", // 向后端传的code字符串
                },

                dot_info: [
                    {
                      code: '1',
                      name: "画报点击"
                    },

                    {
                        code: '2',
                        name: "画报展现"
                    },

                    {
                        code: '3',
                        name: "设置壁纸"
                    },
                    {
                        code: '4',
                        name: "设置H5"
                    },
                    {
                        code: '5',
                        name: "视频播放"
                    }
                ]
            }
        },

        computed: {
             checkOptionsData() {
                return this.dot_info;
             },
        },

        mounted() {
            this.formParams.checkeddotNames = this.dot_info.map(item => item.code)
        },

        methods: {
            // 全选
            handleCheckAllChange() {
                //console.log("全选", val); // val就是v-model绑定的值,即this.formParams.checkAll
               if (this.formParams.checkAll) {
                // 当全选被选中的时候,循环遍历源数据,把数据的每一项加入到默认选中的数组中区
                this.formParams.checkeddotNames = this.dot_info.map((item) => item.code);
                } else {
                    this.formParams.checkeddotNames = [];
                    this.formParams.code = "";
                }
                this.isIndeterminate = false;
            },

             // 全选后面的单选
            handleCheckeddotNamesChange(value) {
                // value就是v-model绑定的值,即this.formParams.checkeddotNames
                console.log(value);
                if (this.formParams.checkeddotNames.length == this.dot_info.length) {
                    this.formParams.checkAll = true;
                } else {
                    this.formParams.checkAll = false;
                }

                this.formParams.code = this.formParams.checkeddotNames.join(",");  // 需要拼接成字符欻,用逗号,具体以什么样的格式,可与后端协商
            },
        }
    }
</script>

<style lang="scss" scoped>

.select-all {
    margin-right: 20px;
}
.el-checkbox-wrap {
    display: flex;
    align-content: center;
    margin: 20px 0 20px 0;
}
</style>

温馨提示

效果是其次的,需要注意的是,向后端传递具体的数据,最后把需要的字段,数据传递给后端就可以了的

拓展

有些图片上右上角有单选项框,背景是图片,类似这种的也是类似处理

17836bddc0db68a1b69a10a506123cac.png

记账就用轻记账


62ba39232ca82f8a9764f56b5643600b.png

公众号(ID:itclanCoder)

码能让您早脱菜籍,文能让您洗净铅华

文章都看完了ed350dac02a10a6764e29d727c0a2d11.gif不点个在看吗

917d77dff2fef583b3b7d19642724e61.gif

戳原文,即可阅读更多内容哦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值