vue3.2/Vite/Ts48: 完成分类组件业务

└─src
    ├─components
    │  └─Category
    │      └─index.vue
    ├─store
    │  └─modules
    │      └─category.ts
    └─views
        └─product
            └─attr
                └─index.vue

<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select v-model="categoryStore.c1Id" @change="handle">
          <el-option
            v-for="(c1, index) in categoryStore.c1Arr"
            :key="c1.id"
            :label="c1.name"
            :value="c1.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <!-- 收集二级分类的 id -->
        <el-select v-model="categoryStore.c2Id" @change="handle1">
          <el-option
            v-for="(c2, index) in categoryStore.c2Arr"
            :key="c2.id"
            :label="c2.name"
            :value="c2.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="categoryStore.c3Id">
          <el-option
            v-for="(c3, index) in categoryStore.c3Arr"
            :key="c3.id"
            :label="c3.name"
            :value="c3.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup lang="ts">
  import { onMounted } from "vue";
  import useCategoryStore from "@/store/modules/category";

  let categoryStore = useCategoryStore();

  const getC1 = () => {
    categoryStore.getC1();
  };

  onMounted(() => {
    getC1();
  });

  // 一级分类 select change 时候触发
  const handle = () => {
    categoryStore.c2Id = "";
    categoryStore.c3Arr = [];
    categoryStore.c3Id = "";
    categoryStore.getC2();
  };
  // 二级分类 select change 时候触发
  const handle1 = () => {
    categoryStore.c3Id = "";
    categoryStore.getC3();
  };
</script>

import { defineStore } from "pinia";
import { reqC1, reqC2, reqC3 } from "@/api/product/attr";
import type { CategoryResponseData } from '@/api/product/attr/type';
import type { CategoryState } './types/type';

let useCategoryStore = defineStore("Category", {
  state: (): CategoryState => {
    return {
      c1Arr: [],
      c1Id: "",
      c2Arr: [],
      c2Id: "",
      c3Arr: [],
      c3Id: "",
    };
  },
  actions: {
    getC1() {
      let result: CategoryResponseData = await reqC1();
      if (result.code === 200) {
        this.c1Arr = result.data;
      }
    },
    async getC2() {
       let result: CategoryResponseData = await reqC2(this.c1Id);
       if (result.code === 200) {
         this.c2Arr = result.data;
       }
    },
    async getC3() {
       let result: CategoryResponseData = await reqC3(this.c2Id);
       if (result.code === 200) {
         this.c3Arr = result.data;
       }
    }
  },
  getters: {
    // 计算属性
  },
});

export default useCategoryStore;

<template>
  <!-- 三级分类 -->
  <div>
    <Category />
  </div>
  <el-card>
    <el-button
      type="primary"
      size="default"
      icon="Plus"
      :disabled="categoryStore.c3Id"
      >添加属性</el-button
    >
    <el-table border>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column label="属性名称" width="120px"></el-table-column>
      <el-table-column label="属性值名称"></el-table-column>
      <el-table-column label="操作" width="120px"></el-table-column>
    </el-table>
  </el-card>
</template>
<script setup lang="ts">
  import useCategoryStore from "@/store/modules/category";
  let categoryStore = useCategoryStore();
</script>