Element.UI renderHeader 如何渲染 el-checkbox-group

新手上路,请多包涵

1,在使用renderHeader 渲染el-checkbox-group的时候,发现绑定的数组没有生效
全选 使用的v-model没问题,但是在el-checkbox-group上面没有效果
2,在el-checkbox-group 上面绑定change事件 value 是 undefined
let option = [];

                        for(let j=0; j<list[i].option.length; j++){
                            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)
                            ])
                        ]);
阅读 4.4k
1 个回答
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)
                    }
                }
           }
       })
   }))

你看看这样,el-checkbox-group只是个容器,主要的还是在‘el-checkbox’你遍历后在这个下边写增加和删除的逻辑

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题