vue单选控全选、全选控单选,并且循环多次该组件


前言

实现一个组件,它具有:
  • 单选、全选功能
  • 可以被循环、互不干扰

就像这样:
在这里插入图片描述


一、template部分

使用的UI库是腾讯的 magicbox

	// 不需要关注其中的类名和变量,只需关注方法:handleCheckedAll、handleChange
    <div class="group-label">{{ groupData.group_name }}</div>
        <bk-checkbox v-model="isCheckedAll" @change="handleCheckedAll">全选</bk-checkbox>
    </div>
    <bk-checkbox-group class="property-list" v-model="checkedList" @change="handleChange">
        <bk-checkbox class="property-item" v-for="item in groupData.attList" :key="item.property_id" :value="item.property_id">
            {{ item.property_name }}
        </bk-checkbox>
    </bk-checkbox-group>

二、js部分

代码如下:

data() {
    return {
        isCheckedAll: false,   *是否全选*
        checkedList: []        *该组已勾选的集合*
    }
},
computed: {
   attList() {
   	   *被循环的列表*
       return this.groupData.attList.map(item => item.property_id)
   }
}
methods: {
    *全选控单选*
    handleCheckedAll(val) {
        this.checkedList = val ? this.attList : []
        this.$emit('selectChanged')  *发送给父组件的事件,父组件使用 $refs + concat 提取所有已勾选*
    },
    *单选控全选*
    handleChange(val) {
        this.isCheckedAll = val.length === this.attList.length
        this.$emit('selectChanged')
    }
}

总结

  1. 必须提炼成组件才能单独维护一组数据
  2. 不要给bk-checkbox绑定事件或value,它是循环出来的
  3. 汇总所有分组的勾选,需要父组件使用 $refs + concat 提取
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值