ReptileFront/components/Mai/Tab/Index.vue

<script lang="tsx">
import { defineComponent } from 'vue';
interface DataSourceItem {
  name: string;
  id: string;
  children: DataSourceItem[];
}

export default defineComponent({
  props: {
    dataSource: {
      type: Array,
      default() {
        return [];
      },
    },
    active: {
      type: String,
      required: true,
    },
  },
  emits: ['change'],
  //ts-ignore
  setup(props, ctx) {
    const { prefixCls } = useDesign('mai-tab');
    function onChange(data: DataSourceItem, active: string) {
      if (props.active === active) return;
      ctx.emit('change', data, active);
    }
    return () => (
        <>
          {// @ts-ignore
            props.dataSource.map((tab: DataSourceItem) => (
              <div class={`${prefixCls}`} key={tab.id}>
                <div class={`${prefixCls}--title-wrap  flex justify-end`}>
                  <div class={`${prefixCls}--title-bg`}></div>
                  <h3 class={`${prefixCls}--title`}>{tab.name}</h3>
                </div>
                <div class={`${prefixCls}--item flex flex-col items-end`}>
                  {tab.children &&
                      tab.children.map((item: DataSourceItem) => (
                          <div
                              onClick={() => {
                                onChange(item, item.id);
                              }}
                              key={item.id}
                              class={[
                                `${prefixCls}--item-title`,
                                props.active === item.id ? `${prefixCls}--item-active` : '',
                                'flex justify-between items-center',
                              ]}
                          >
                            <span class="title">{item.name}</span>
                            <el-icon><el-icon-ArrowRightBold /></el-icon>
                          </div>
                      ))}
                </div>
              </div>
          ))}
          {/*  <div class={`${prefixCls}`}>
          <div class={`${prefixCls}--title-wrap  flex justify-end`}>
            <div class={`${prefixCls}--title-bg`}></div>
            <h3 class={`${prefixCls}--title`}>{props.title}</h3>
          </div>
          <div class={`${prefixCls}--item flex flex-col items-end`}>
            {props.dataSource.map((item: DataSourceItem, index) => (
              <div
                onClick={() => {
                  onChange(item, index);
                }}
                key={item.id}
                class={[
                  `${prefixCls}--item-title`,
                  currentActive.value === index ? `${prefixCls}--item-active` : '',
                  'flex justify-between items-center',
                ]}
              >
                <span class="title">{item.title}</span>
                <Icon icon="ant-design:right-outlined"></Icon>
              </div>
            ))}
          </div>
        </div>*/}
        </>
    );
  },
});
</script>

<style scoped lang="scss">
@import 'MaiTab';
</style>