soc_app/src/components/orgTree/index.vue

<template>
  <div class="orgTree van-hairline--bottom">
    <tree-select
      :addendToBody="true"
      @input="onInput"
      @select="onSelect"
      v-model="selected"
      :options="orgTree"
      :clearable="clearable"
      label='检查机构'
      :backspaceRemoves="false"
      :placeholder="placeholder"
      :normalizer="tenantIdnormalizer"
      :show-count="true"
      :noChildrenText="''"
      noResultsText="暂无符合条件的数据">
    </tree-select>
    <!-- <van-checkbox v-model="checked" shape="square">复选框</van-checkbox> -->
  </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: {
    //是否展示机构简称
    isOrgName:{
      type:Boolean,
      default:true
    },
    value: {
      type: [String,Number],
      default: null
    },
    placeholder: {
      type: String,
      default: '请选择机构'
    },
    clearable:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      treeData: [],
      selected: null,
      checked:false,
    }
  },
  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: this.isOrgName?  node.shortName: node.name,
        children: node.children
      }
    },
    onInput(value){
      this.$emit('change', value);
    },
    onSelect(value) {
      this.$emit('changeItem', value);
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
<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;
    width: 100%;
  }
  .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;
  }
  .vue-treeselect--open-below .vue-treeselect__menu{
    border: 1px solid #cfcfcf;
    margin-top:3px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
  }
  .vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control{
    border-color: #fff;
    box-shadow: none;
  }
}
</style>