Vue2+element-ui 实现select选择器结合Tree树形控件实现下拉树效果

 效果：

DOM部分 ： // 设置el-option隐藏的下拉选项，选项显示的是汉字label，值是value // 如果不设置一个下拉选项，下面的树形组件将无法正常使用

        
 // 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value
      // 如果不设置一个下拉选项，下面的树形组件将无法正常使用
          
          
          
        
      

 js部分：

:highlight-current="true" :current-node-key="currentKey"开启高亮当前节点的功能

this.deptOptions格式为数组嵌套数组：例如

 data: [{
        id: 1,
        name: '一级 1',
        children: [{
          id: 11,
          name: '二级 1-1',
          children: [{
            id: 111,
            name: '三级 1-1-1'
          }]
        }]
      }],

data({

   // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pushType: null,
        pushTime: null,
        level: null,
        status: null,
        monitorId: null, //绑定的id
        labelName: '' //用于回显的label文字
      },
//下拉款结构
 defaultProps: {
        children: 'children',
        label: 'label'
      }

    }
)
 created() {
   
    this.getMonitorTree() //初始化获取tree下拉框
  },
  methods: {
   /** 获取监控区域下拉树结构 */
    getMonitorTree() {
      monitorTreeSelect().then((response) => {
      
        response.data.forEach(item => {
          this.deptOptions.push({
            id: item.id,
            label: item.label,
            children: item.children,
          })

        });
      })
    },
//选中需要绑定的id，赋值给 this.queryParams.monitorId
  handleNodeClick(data) {
      this.queryParams.labelName = data.label
      this.queryParams.monitorId = data.id
      this.$refs.selectUpResId.blur()  //选中后隐藏下拉框
    }
}