封装el-checkbox 对象数组回显+选中

elementUI组件的el-checkbox只能回显基本数据数组，现在遇到了一个需求是回显对象数组，查询了很多资料，可以修改elementUI源码来实现，但是那样不是很友好，所以就自己封装了一下。

父子组件调用

子组件

<template>
  <div>
    <el-checkbox-group v-model="checkArr" @change="handleChange">
      <el-checkbox v-for="item in myData" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'myCheckBox',
  props: {
    // 父组件传递的已选中的对象数组
    myCheck: {
      type: Array,
      default: ()=>{
        return []
      }
    },
    // 父组件传递进来的所有可选项
    myData: {
      type: Array,
      default: ()=>{
        return []
      }
    }
  },
  data() {
    return {
      // 传递出去的对象数组
      checkList: [],
      // el-checkbox选中
      checkArr: [],
    }
  },
  created() {
  },
  watch:{
    // 改变对象数组为基本类型数组（el-checkbox使用）
    'myCheck':{
      handler(newValue){
        this.checkArr = newValue.map(item => item.id)
      },
      deep:true
    }
  },
  methods: {
    // 修改触发事件---传递给父组件选中的对象数组数据
    handleChange() {
      this.checkList = this.myData.filter(item => this.checkArr.includes(item.id))
      this.$emit('sendCheckList',this.checkList)
    }
  }
}
</script>

<style scoped>
</style>

父组件

<template>
 <div>
   <my-check-box :myData="dataArr" :myCheck="checkArr" @sendCheckList="myCheckArr"></my-check-box>
 </div>
</template>

<script>
import MyCheckBox from '@/views/myCheckBox'
export default {
  name: 'Index',
  components: { MyCheckBox },
  data() {
    return {
      // 传递给子组件的可选项
      dataArr:[],
      // 传递给子组件的对象选中数组
      checkArr: []
    }
  },
  created() {
  },
  mounted() {
   this.init()
  },
  methods: {
    // 初始化数据
    init(){
      setTimeout(()=>{
        this.dataArr =  [
          {id:1, name:'huahua1'},
          {id:2, name:'huahua2'},
          {id:3, name:'huahua3'},
          {id:4, name:'huahua4'}
        ]
        this.checkArr = [
          {id:1, name:'huahua1'},
          {id:2, name:'huahua2'}
        ]
      },1000)
    },
    // 替换父组件的选中对象数据
    myCheckArr(data){
      this.checkArr = data
    }
  }
}
</script>

<style lang="scss" scoped>
</style>