灏天阁

vue3.2/Vite/Ts47: 属性三级分类功能

· Yin灏

目录结构

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

定义 ts 类型

src/api/product/attr/type.ts

export interface ResponseData {
  code: number;
  message: string;
  ok: boolean;
}

export interface CategoryObj {
  id: number | string;
  name: string;
  categroy1Id?: number;
  categroy2Id?: number;
}

export interface CategoryResponseData extends ResponseData {
  data: CategoryObj[];
}

处理接口

src/api/product/attr/index.ts

import request from "@/utils/request";
import type { CategoryResponseData } from "./type";

enum API {
  C1_URL = "/admin/product/getCategory1",
  C2_URL = "/admin/product/getCategory2/",
  C3_URL = "/admin/product/getCategory3/",
}

// 获取一级分类
export const reqC1 = () => request.get<any, CategoryResponseData>(API.C1_URL);

// 获取二级分类
export const reqC2 = (category1Id: number | string) =>
  request.get<any, CategoryResponseData>(API.C2_URL + category1Id);

// 获取三级分类
export const reqC3 = (category2Id: number | string) =>
  request.get<any, CategoryResponseData>(API.C3_URL + category2Id);

三级分类组件

src/components/Category/index.vue

<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select v-model="categoryStore.c1Id">
          <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="二级分类">
        <el-select>
          <el-option>北京</el-option>
          <el-option>上海</el-option>
          <el-option>深圳</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select>
          <el-option>北京</el-option>
          <el-option>上海</el-option>
          <el-option>深圳</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();
  });
</script>

定义小仓库 TS 类型

src/store/modules/types/type.ts

//...
import type { CategoryObj } from "@/api/product/attr/type";
//...
export interface CategoryState {
  c1Id: string | number;
  c1Arr: CategoryObj[];
  c2Arr: CategoryObj[];
  c2Id: string | number;
  c3Arr: CategoryObj[];
  c3Id: string | number;
}
//...

新建三级分类仓库

src/store/modules/category.ts

import { defineStore } from "pinia";
import { reqC1 } 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;
      }
    },
  },
  getters: {
    // 计算属性
  },
});

export default useCategoryStore;

- Book Lists -