<template>
<div>
<tree
only-leaf
show-checkbox
type="tree"
v-model="selectValue"
:label-key="labelKey"
:value-key="valueKey"
:data-source="list"
@on-toggle-expand="toggleExpand"
@on-select-change="selectChange"
@on-check-change="checkChange"
></tree>
</div>
</template>
<script>
import Tree from "vue-jtree";
export default {
components: {Tree},
data() {
return {
list: [
{
name: "霍山县",
pId: "341500000000000",
open: "False",
id: "341525000000000",
children: [
{
name: "衡山镇",
pId: "341525000000000",
open: "False",
id: "341525100000000"
},
{
name: "与儿街镇",
pId: "341525000000000",
open: "False",
id: "341525104000000"
},
{
name: "黑石渡镇",
pId: "341525000000000",
open: "False",
id: "341525105000000"
},
{
name: "诸佛庵镇",
pId: "341525000000000",
open: "False",
id: "341525106000000"
},
{
name: "高桥湾现代产业园",
pId: "341525000000000",
open: "False",
id: "341525401000000"
}
]
}
],
showCheckBox: false,
type:'select',
labelKey: "name",
valueKey: "id",
childrenKey:'children',
selectValue:'',
};
},
created() {
this.selectValue = "350602";
},
watch:{
selectValue(){
console.log('selectValue',this.selectValue);
},
},
methods: {
toggleExpand(node){
console.log('toggleExpand',node);
},
selectChange(node){
console.log('selectChange',node);
},
checkChange(nodes){
console.log('checkChange',nodes);
},
}
};
</script>