el-tree结合checkbox实现数据回显

组件代码

<el-tree:data="vertiList"show-checkboxnode-key="id":props="defaultProps"ref="treeRefx"class="custom-tree"@check-change="handleCheckChange">
</el-tree>

获取选择的节点

handleCheckChange(a,b,c){const selectedItems = this.$refs.treeRefx.getCheckedNodes(true);this.selectedValuex=selectedItems;},

初始值

data(){return{defaultProps: {children: 'children',label: 'label'},selectedValuex:[],vertiList:[{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],}
}

checkbox数据回显方法

reSetTree(){var xids=[];for(var i=0;i<this.selectedValuex.length;i++){xids.push(this.selectedValuex[i].id);}this.$nextTick(() => {this.$refs.treeRefx.setCheckedKeys(xids);});}