element-ui+vue实现懒加载的树形图选择器

在，开发的过程中，有这样一个需求
需要选择资源，并且是多选，但是资源是放在文件夹里的，并且未知层数，因此需要树状图展示，并且树状图的选中的节点需要展示在select选择器的input框内
实现效果如下

代码：

<el-form-item id="specialItem" label="资源" class="resource-select">
   <el-select
     v-model="nodeForm.resourceList"
     multiple
     filterable
     placeholder="请选择资源"
     :disabled="disabled"
     popper-class="node-setting-popper"
   >
     <el-tree
       class="select-tree"
       :props="props"
       :load="loadNode"
       lazy
     >
       <span slot-scope="{ node, data }" class="custom-tree-node-select">
         <el-option :value="node.label"><span>{{ node.label }}</span></el-option>
       </span>
     </el-tree>
   </el-select>
 </el-form-item>

data() {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      }
    }
  },

methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region' }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [{
          name: 'leaf',
          leaf: true
        }, {
          name: 'zone'
        }]

        resolve(data)
      }, 500)
    }
}

注意这里的样式：检查元素可以发现，select下拉选择的样式是在整个body外面的，因此不能写在scoped内，不生效

<style lang='scss'>
.custom-tree-node-select{
  width: 100% !important;
}
.select-tree {
  .el-select-dropdown__item.selected{
     background-color: transparent !important;
     color: #e8834d !important;
  }
  .el-select-dropdown__item.hover{
    background-color: transparent !important;
  }
}
</style>

点击树状图的节点，即可以实现选中和取消选中