zhbsq-vue-web/src/components/selectTree/index.vue

<template>
    <el-select
        filterable
        v-model="modelValue"
        :placeholder="placeholder"
        ref="selectUpResId"
      >
      <el-option
        :value="modelValue" 
        style="overflow: auto; height: 100%"
        hidden
        />
      <el-tree
        :data="dataList"
        :props="defaultProps"
        :node-key="nodeKey"
        :expand-on-click-node="expandNode" 
        :check-on-click-node="checkNode" 
        check-strictly
        @node-click="handleNodeClick"
      />
    </el-select>
</template>

<script>
export default {
    data() {
        return {
            form: {
               label: '',
               id: ''
             },
             dataList:[]
        }
      
    },
    props: {
        param: {
          type: Array,
          required: true
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        formatId: {
            type: String,
            default: 'deptId'
        },
        defaultProps: {
            type: Object,
            default: () => {
                return {
                    children: "children",
                    label: "deptName"
                }
             }
        },
        nodeKey: {
            type: String,
            default: 'deptId'
        },
        expandNode: {
            type: Boolean,
            default: false
        },
        checkNode: {
            type: Boolean,
            default: true
        },
        modelValue: {
            type: String,
            default: ''
        }
    },
    created() {
        this.dataList = this.handleTree(this.param, this.formatId);
    },
    methods: {
        handleNodeClick(data) {
          this.$emit('setNodeValue', data)
          this.$refs.selectUpResId.blur()
        }
    }
}
</script>