基于Element UI的下拉树选择框

代码：

  <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();
      }
    },

效果图如下：