SaaS-lib/lib/component/form/cascader/cascader.vue

<template>
  <a-cascader :load-data="loadData" :options="options">
    <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, toRefs } from 'vue';
  import type { CascaderProps } from 'ant-design-vue';
  import { http } from '/nerv-lib/util';
  import { AxiosRequestConfig } from 'axios';
  import { useApi } from '/nerv-lib/use';
  import { get } from 'lodash-es';
  const { httpRequest } = useApi();
  export default defineComponent({
    name: 'NsCascader',
    props: {
      api: [Function, String, Object],
      options: Array,
      listField: {
        type: String,
        default: 'data',
      },
      defaultParams: Object,
    },
    setup(props, { attrs }) {
      console.log(props, attrs);
      const requestConfig: AxiosRequestConfig = { method: 'get' };
      let options = ref<any[]>(props['options'] || []);

      if (props.api) {
        // eslint-disable-next-line vue/no-setup-props-destructure
        const { api, defaultParams, listField } = props;
        httpRequest({
          api,
          params: defaultParams,
          pathParams: {},
          requestConfig,
        }).then((res) => {
          options.value = get(res, listField);
        });
      }
      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>