HTML:
<div style="padding-right: 50px">
<a-tree
@expand="onExpand"
:tree-data="expandform.treeList"
:expandedKeys="expandform.expandedKeys"
:selectedKeys="expandform.selectedKeys"
@select="select"
:replace-fields="replaceFields"
/>
</div>
JS:
import {
reactive,
onMounted,
} from 'vue';
import {
tree,
} from "ant-design-vue";
import {post} from "../../../../../../api/http"
export default {
name: "Equip",
setup() {
let expandform = reactive({
selectedKeys: [], //设置选中的树节点
treeList: [], //列表
expandedKeys:[], //展开指定的树节点
})
const onExpand = (expandedKeys) => {
expandform.expandedKeys = expandedKeys
expandform.selectedKeys = expandedKeys
}
const select = (e, b) => {
console.log(b);
console.log(e);
console.log(e[0]);
if (e[0]) {
expandform.selectedKeys = [e[0]];
// this.getOrganizationDtoPage(e[0])
}
}
const replaceFields = {
title: "name",
key: "id",
children: "childList",
}
const getTree = () =>{
post("/sys/dictionary/getDictionaryList", {
params: {
code: 'NUCLEAR_EQUIPMENT',
},
})
.then((res) => {
//设置一级
expandform.treeList= [{
name:"和应急装备",
id:"-1",
childList:[...res.data]
}]
expandform.expandedKeys = ['-1']
console.log(expandform.treeList)
})
.catch((res) => {
message.error(res);
});
}
console.log(expandform)
onMounted(() => {
getTree()
})
return {
onExpand,
expandform,
select,
replaceFields,
}
},
data() {
return {};
},
created() {},
methods: {},
components: {
aTree: tree
}
};