Element-ui checkbox-group-一一网

Element-ui checkbox-group

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>
复制代码

剖析

属性: v-model双向绑定值, 且为数组类型
方法: change事件,双向绑定的值value发生变化后的回调
如何将checkbox-group的值传递给checkbox子组件？– 子组件通过向上追溯找到父组件checkbxo-group
子组件checkbox值发生变化后, 如何通知父组件checkbox-group更新value值？

测试代码

<template>
  <div>
    <p>checkbox-group</p>
    <y-checkbox-group v-model="checkboxGroupOptions" @change="handleCheckboxChange">
      <y-checkbox
        v-for="(item, index) in checkboxGroupPem" 
        :key="index" 
        :label="item.id">
        {{item.name}}
      </y-checkbox>
    </y-checkbox-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkboxGroupOptions: ["1"],
      checkboxGroupPem: [
        {
          id: "1",
          name: '杭州',
        },{
          id: "2",
          name: '上海',
        },{
          id: "3",
          name: '北京',
        }
      ],
    }
  },
  methods: {
    handleCheckboxChange(data) {
      console.log('handleCheckboxChange', data);
    }
  },
  watch: {
    checkboxGroupOptions() {
      console.log('checkboxGroupOptions', this.checkboxGroupOptions)
    }
  }
}
</script>
复制代码

可用于权限控制, checkboxGroupOptions绑定默认的权限, checkboxGroupPem菜单项所拥有的权限
checkboxGroupOptions多选框选中绑定的数组, checkboxGroupPem为渲染的多选框列表

checkbox-group

<template>
    <!-- checkbox-group 
        属性: v-model双向绑定值, 且为数组类型
        方法: change事件,双向绑定的值value发生变化后的回调
        如何将checkbox-group的值传递给checkbox子组件？-- 子组件通过向上追溯找到父组件checkbxo-group
        子组件checkbox值发生变化后, 如何通知父组件checkbox-group更新value值？
    -->
    <div 
        class="y-checkbox-group"
        role="checkboxgroup">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'YCheckboxGroup',
    componentName: 'YCheckboxGroup',
    props: {
        value: {},
    }
}
</script>
复制代码

checkbox 组件修改

<script>
import Emitter from '../../../src/mixins/emitter';
export default {
    name: 'YCheckbox',
    props: {
        value: {},
        label: {},
        indeterminate: Boolean,
    },
    mixins: [Emitter],
    computed: {
        isGroup() {
            let parent = this.$parent;
            while (parent) {
                if(parent.$options.componentName !== 'YCheckboxGroup') {
                    parent = parent.$parent;
                }else {
                    // 保留父组件checkbox-group的数据
                    this._checkboxGroup = parent;
                    console.log('_checkboxGroup', this._checkboxGroup);
                    return true;
                }
            }
            return false;
        },
        model: {
            get() {
                // return this.value;
                return this.isGroup ? this._checkboxGroup.value : this.value;
            },
            set(val) {
                // 为什么val会自动增删呢？由于父组件的value是数组类型, 则更新即删除和添加，如何做到的呢？
                if(this.isGroup) {
                    console.log('model发生了变化', val, this.label);
                    this.dispatch('YCheckboxGroup', 'input', [val]);
                }else {
                    this.$emit('input', val);
                }
                this.$refs.checkbox && (this.$refs.checkbox.checked = this.isChecked);
            }
        },
        isChecked() {
            // 如果是第一种情况, 单独使用多选框且value值为布尔类型
            if({}.toString.call(this.model) === '[object Boolean]') { // 第一种情况
                console.log('hhhh', this.model);
                return this.model;
            }
            else if(Array.isArray(this.model)) { // 第二种情况
                // console.log(this.model, this.label);
                // 判断值是否存在于数组中
                // indexOf和includes的区别
                return this.model.indexOf(this.label) > -1;
            }
            // 第三种情况，父组件是checkbox-group, 则this.model为数组类型，从而转化为第二种情况
            // console.log('第三种情况，父组件是checkbox-group', this._checkboxGroup.value, this.label);
        }
    },
    methods: {
        // 父组件可能有change事件，即选中状态变化后的回调
        handleChange() {
            this.$nextTick(()=>{
                this.$emit('change', this.model, this._checkboxGroup);
                if(this.isGroup) {
                    // 组件checkbox-group绑定的change事件
                    this.dispatch('YCheckboxGroup', 'change', [this._checkboxGroup.value]);
                }
            })
        },
    },
}
</script>
复制代码