組件代碼
<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);});}