template:
<a-tree
v-if="treeData.length"
:checkable="true"
v-model="checkedSiteId"
:checkStrictly="true"
:tree-data="treeData"
defaultExpandAll
ref="treeForm"
:replaceFields="{ children: 'children', title: 'title', key: 'id' }"
@check="handleNodeClick">
</a-tree>
js:
data(){
return:{
//樹結構:和上面的replaceFields變量内容大緻對應
treeData: [
{
children: [
{
id: "1198908685567560144"
statu: undefined
title: "A站"
},
{
id: "11984789756097817201"
statu: undefined
title: "123"
}
],
disabled: true
id: -1
title: "所有站點"
}
],
checkedSiteId: [],
}
}
methods: {
//a-tree 單選模式
handleNodeClick(checkedKeys) {
console.log(checkedKeys);
this.checkedSiteId = [].concat(checkedKeys.checked[checkedKeys.checked.length - 1]);
// this.checkedSiteId = [];
// this.checkedSiteId.push(checkedKeys.checked[checkedKeys.checked.length - 1]);
this.$nextTick(() => {
if (this.checkedSiteId.length > 0) {
this.siteActiveName = 'first';
this.getPlantInfo(this.checkedSiteId.join(',')); //查詢站點資訊
} else {
return this.$message.info('請選擇項目進行查詢');
}
});
},
},
mounted(){
_this.checkedSiteId = [];
_this.checkedSiteId.push(1198908685567560144);//預設選中A站
}
效果:
圖(1)
圖(2)
注意: