How Element.UI renderHeader renders el-checkbox-group

1. When rendering el-checkbox-group with renderHeader, it is found that the bound array does not take effect
the v-model used for all selections is fine, but there is no effect on el-checkbox-group
2. Binding the change event value on el-checkbox-group is undefined
let option = [];

                        for(let j=0; j<list[i].option.length; jPP){
                            let temp = h("el-checkbox",{
                                class:"gird-filter-checkbox",
                                props:{
                                    label:list[i].option[j],
                                    key:list[i].option[j]
                                },
                            })

                            option.push(temp);
                        }


                        let checkbox = h("div",{
                            class:"grid-filter-three grid-filter-ds"
                        },[
                            h("el-input",{
                                class:"grid-filter-input",
                                attrs:{
                                    clearable:true,
                                    placeholder:""
                                },
                                props:{
                                    "prefix-icon":"el-icon-search"
                                }
                            }),
                            h("div",[
                                h("el-checkbox",{
                                    class:"gird-filter-checkbox-all",
                                    props:{
                                        indeterminate:this.tableFilter.checkbox.isIndeterminate
                                    },
                                    on:{
                                        change:(val)=>{
                                            this.tableFilter.checkbox.list = val ? list[i].option : [];
                                            this.tableFilter.checkbox.indeterminate = false;
                                        }
                                    },
                                    "v-model":this.tableFilter.checkbox.checkAll
                                },""),
                                h("el-checkbox-group",{
                                    class:"gird-filter-checkbox-group",
                                    on:{
                                      change:(value)=>{
                                          alert(value);
                                          let checkedCount = value.length;
                                          this.tableFilter.checkbox.checkAll = checkedCount === this.tableFilter.checkbox.list.length;
                                          this.tableFilter.checkbox.indeterminate = checkedCount > 0 && checkedCount < this.tableFilter.checkbox.list.length;
                                      }
                                    },
                                    "v-model":this.tableFilter.checkbox.list
                                },option)
                            ])
                        ]);
Jan.08,2022

h('div', {
    class: {
        'checkbox-group': true
    }
}, this.rowCheckList.map((row, index) => {
    return h('el-checkbox', {
        props: {
            label: row,
            key: index
        },
        attrs:{
            value: defaultCheck(row) // 
        },
        on: {
            input: (value) => {
                if (value) {
                    this.checkedRow.push(row)
                } else {
                    let i = this.checkedRow.findIndex(val => val == row)
                        this.checkedRow.splice(i, 1)
                    }
                }
           }
       })
   }))

if you look at this, el-checkbox-group is just a container, and the main thing is to write the logic of adding and deleting under this el-checkbox' after you traverse it

Menu