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;