代码:
<el-select
v-model="Pub_system.topicCode"
placeholder="请选择节点"
style="width: 100%"
ref="selectTopic"
>
<el-option
:value="Pub_system.topicCode"
:label="Pub_system.topicName"
style="width: 360px;height:270px;overflow: auto;"
>
<el-tree
style="margin-top:20px"
:data="topicData"
:props="topicProps"
@node-click="topicNodeClick"
></el-tree>
</el-option>
</el-select>
其中:
topicProps: {
children: "children",
label: "topicName"
}
数据格式形如:
[
{
"topic_id": "01",
"topicCode": "ROOT",
"topicName": "主题",
"children":[
{
"topic_id": "02",
"topicCode": "BIDS",
"topicName": "基础数据服务",
"children":[
{
"topic_id": "dd4ac00d-9874-4252-a99d-4429732be109",
"topicCode": "BIDS01",
"topicName": "生产标准及质量"
},
{"topic_id": "d4ba13e7-930d-4d64-87ce-69a872a3ba21", "topicCode": "BIDS02", "topicName": "设备运行信息"},
{"topic_id": "df708159-98e4-4cf5-9710-ad256c998a72", "topicCode": "BIDS03", "topicName": "生产BOM基础数据"},
]
},
{"topic_id": "03", "topicCode": "PIDS", "topicName": "计划数据服务"},
{"topic_id": "04", "topicCode": "JIDS", "topicName": "作业数据服务"}
]
]
方法:
topicNodeClick(data, node) {
console.log(node, "node");
debugger;
if (node.children) {
//todo
} else {
//todo
this.Pub_system.topicCode = data.topicCode;
this.Pub_system.topicName = data.topicName;
// this.$refs.selectTopic.blur();
}
},
效果图如下: