关于使用vue-treeselect下拉框定位不复原，以及靠近element-ui的样式

  <treeselect
    v-model="value"
    :options="companyList"
    :normalizer="normalizer"
    :multiple="false"
    :clearable="false"
    :default-expand-level="99"//默认全部打开
    placeholder="选择父级"
    @open="handleOpen"//若使用close则获取不到节点
  ></treeselect>
  <script>
  import treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    name: 'CompanyIdList',
    components: { treeselect },
    methods: {
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        }
      },
      handleOpen() {
        this.$nextTick(() => {
          let dom = document.getElementsByClassName('vue-treeselect__menu')[0]
          if (!this.modelValue) {//判断是否有值
            if (dom !== null) {
              dom.scrollTop = 0
            }
          } else {
            let domSelect = document.getElementsByClassName(
              'vue-treeselect__option--selected'
            )[0]
            if (dom !== null) {
              dom.scrollTop = domSelect.offsetTop
            }
          }
        })
      },
    },
}

</script>
<style lang="scss" scoped>
  ::v-deep {
    .vue-treeselect__control {
      border-radius: 2px;
      height: 32px;
      border: 1px solid #dcdfe6;
      box-shadow: none !important;
      &_:hover {
        outline: none;
        border-color: #0091ff;
      }
    }
    .vue-treeselect__input {
      width: 100%;
      height: 32px !important;
    }

    .vue-treeselect__control-arrow-container {
      position: relative;
      .vue-treeselect__control-arrow {
        width: 10px;
        height: 10px;
        border: solid #dcdfe6;
        border-width: 2px 0 0 2px;
        transform: translate(-50%, -50%) rotate(-135deg);
        position: absolute;
        top: calc(50% - 3px);
        left: calc(50% - 3px);
        path {
          display: none;
        }
      }
      .vue-treeselect__control-arrow--rotated {
        transform: translate(-50%, -50%) rotate(45deg);
        top: calc(50% + 3px);
      }
    }

    .vue-treeselect__menu {
      padding-top: 0px;
      padding-bottom: 0px;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      .vue-treeselect__label {
        height: 30px;
      }
    }
  }
</style>