<template>
  <a-cascader :load-data="loadData" :options="options" change-on-select>
    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
      <slot :name="item" v-bind="data || {}"> </slot>
    </template>
  </a-cascader>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import type { CascaderProps } from 'ant-design-vue';
  export default defineComponent({
    name: 'NsCascader',
    setup(props, { attrs }) {
      let options = ref<any[]>(attrs['options'] || []);
      let loadData: CascaderProps['loadData'] | null = (selectOptions) => {
        attrs['loadData'](selectOptions, options, attrs);
      };
      if (attrs['loadData']) {
        loadData(options);
      } else {
        loadData = null;
      }

      return {
        loadData,
        options,
      };
    },
  });
</script>
<style lang="less" scoped></style>
