【elementUI】el-select和el-tree结合使用后，select下拉面板在选中数据后不会自动折叠的解决方法

结合使用的写法

<template>
  <div class="select-wrap">
  <el-select 
    v-model="domain.attrValue" 
    size="mini"
    :popper-append-to-body="false"
    ref="selectTree"
    @visible-change="handleVisible"
  >
    <el-option hidden :label="domain.attrValue" :value="domain.attrId"></el-option>
    <el-input
      size="mini"
      placeholder="输入内容"
      suffix-icon="el-icon-search"
      v-model.trim="inputAttr"
      @input="handleInputAttr"
    />
    <el-tree
      ref="attrList"
      node-key="id"
      :data="treeData"
      :props="defaultProps"
      :render-content="renderContent"
      :default-expanded-keys="defaultExpandedKeys"
      :default-expand-all="true"
      :expand-on-click-node="true"
      :highlight-current="true"
      @node-click="handleNodeClick"
    ></el-tree>
  </el-select>
  </div>
</template>

处理面板自动折叠的写法：

watch: {
   value: {			// value
     deep: true,
     handler() {
       this.$refs.selectTree.visible = false       
     }
   }
}

第二种方法：在选中数据后触发关闭，因为watch监听会有一个bug，就是如果已经选中一个数据，第二次选中相同数据时，不会触发自动关闭

handleNodeClick(data, node) {
   if (node.isLeaf) {		// 叶子节点
     this.$refs.selectTree.visible = false  
   }
 },