soc_app/src/components/orgTree/index.vue

<template>
  <div class="orgTree van-hairline--bottom">
    <tree-select
      @select="onSelect"
      v-model="selected"
      :options="orgTree"
      :clearable="false"
      :backspaceRemoves="false"
      placeholder="请选择归属机构"
      :normalizer="tenantIdnormalizer"
      :show-count="true"
      :noChildrenText="''">
    </tree-select>
  </div>
</template>
<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {mapGetters} from "vuex";
export default {
  components: {
    TreeSelect
  },
  props: {
    value: {
      type: [String,Number],
      default: null
    }
  },
  data() {
    return {
      treeData: [],
      selected: null,
    }
  },
  computed: {
    ...mapGetters(['orgTree'])
  },
  watch: {
    value: {
      handler(val) {
        if(!val){
          this.selected = null
        }else {
          this.selected = this.value
        }
      },
    },
  },
  methods: {
    /** treeSelect组件自定义数据*/
    tenantIdnormalizer(node, instanceId) {
      if (!node.children || !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    onSelect(value) {
      this.$emit('change', value.id)
      this.$emit('change', value)
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
<style>

</style>
<style lang="scss">
.orgTree {
  font-size: 28px;
  svg {
    background-size: 22px 22px;
    width: 22px;
    height: 22px;
  }

  .vue-treeselect__control {
    width: 100%;
    height: 90px;
    padding: 0 20px;
    border-radius: 0;
    border: none;
  }
  .vue-treeselect__icon-warning{
    display: none;
  }
  .vue-treeselect__placeholder,
  .vue-treeselect__single-value {
    height: 90px;
    line-height: 90px;
  }

  .vue-treeselect__menu {
    padding: 20px;
  }
  .vue-treeselect__label {
    padding: 15px 20px;
  }
  .vue-treeselect__x-container {
    width: 50px;
  }
  .vue-treeselect__control-arrow-container {
    width: 50px;
  }
  .vue-treeselect--single .vue-treeselect__option--selected {
    font-weight: 500;
    color: #589eec;
  }
}
</style>