<template>
  <a-tree-select
    show-search
    style="width: 100%"
    v-model:value="value"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    treeCheckable
    :treeCheckStrictly="true"
    tree-default-expand-all
  />
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { TreeSelect } from 'ant-design-vue';

  export default defineComponent({
    name: 'MultipleTreeSelect',
    components: {
      [TreeSelect.name]: TreeSelect,
    },
    setup() {
      const value = ref<string[]>([]);
      console.log(value);
      console.log('++++++++++++++++++++++++++');
      watch(value, () => {
        console.log('------------------------');
        console.log(value);
        console.log('select', value.value);
      });
      return {
        value,
      };
    },
  });
</script>
