封装自定义树a-tree-select

<template>

  <a-input-group compact v-if="isTrue">
    <a-input v-model:value="inputValue" placeholder="请输入其他" style="width: 110px"/><a-button type="primary" @click="otherTrue">确定</a-button>
  </a-input-group>

  <a-tree-select
      v-if="!isTrue"
      :value="value"
      @change="selectTreeValue"
      show-search
      style="width: 200px"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="请选择"
      tree-default-expand-all
      :tree-data="treeData"
      :field-names="fieldName"
      tree-node-filter-prop="name"
  >
<!--    :field-names="{
      children: 'children',
      label: 'name',
      value: 'value',
    }"-->
  </a-tree-select>

</template>
<script setup>
const { emit } = getCurrentInstance();
import {defineComponent, getCurrentInstance, ref, watch} from 'vue';
    const props = defineProps({
      treeData: {
        type: Array,
        required: true
      },
      value: {
        type: [Array, String],
        required: false,
        default: () => []
      },
      fieldName: {
        type: Object,
        required: false,
      }
    })

    const inputValue = ref('');
    const otherTrue = () =>{
      console.log(inputValue.value)
      isTrue.value = false;
      emit('update:value', inputValue.value)
    }
    const selectTreeValue = (value) =>{
      emit('update:value', value)
      if(value === '其他'){
        isTrue.value = true;
      }
    }
    const isTrue = ref(false);

</script>

其他页面使用：

 <SelectPublic 
             :field-name="{ label: 'name', value: 'name', children: 'child' }"
             v-model:value=""
             :treeData="treeData"/>