<template>
  <div id="app">
      <!-- // 点击清空的实现 -->
      <el-select
      v-model="saveForm.upResId"
      clearable
      placeholder="请选择"
      @clear="handleClear"
      ref="selectUpResId"
    >
      <!-- // 设置一个隐藏的下拉选项
      // 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
      <el-option hidden  :value="saveForm.upResId" :label="upResName">
      </el-option>
      <!-- // 设置树形组件  
        是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
        // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
          // 节点被点击时的回调 -->
      <el-tree
        :data="data"
        :props="defaultProps"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </el-select>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        saveForm:{
          upResId : '',
        },
         upResName: '',
        value: '',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }],
        data: [{
        resId: 1,
        name: '一级 1',
        children: [{
          resId: 11,
          name: '二级 1-1',
          children: [{
            name: '三级 1-1-1'
          }]
        }]
      }, {
        resId: 2,
        name: '一级 2',
        children: [{
          resId: 22,
          name: '二级 2-1',
          children: [{
            resId: 221,
            name: '三级 2-1-1'
          }]
        }, {
          resId: 23,
          name: '二级 2-2',
          children: [{
            resId: 224,
            name: '三级 2-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      };
    },
    methods: {
     handleNodeClick(data) {
       console.log(data);
      // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.upResName = data.name
      this.saveForm.upResId = data.resId
      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.selectUpResId.blur()
    },
    // 选择器配置可以清空选项，用户点击清空按钮时触发
    handleClear() {
      // 将选择器的值置空
      this.upResName = ''
      this.saveForm.upResId = ''
    }
    }
  };
</script>