vue3.2/Vite/Ts46: 属性管理模块静态搭建
·
Yin灏
目录结构
└─src
├─components
│ ├─Category
│ │ └─index.vue
│ └─index.ts
└─views
└─product
└─attr
└─index.vue
处理属性管理静态页面
src/views/product/attr/index.vue
<template>
<!-- 三级分类 -->
<div>
<Category />
</div>
<el-card>
<el-button type="primary" size="default" icon="Plus">添加属性</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"></script>
三级分类组件拆分
src/components/Category/index.vue
<template>
<el-card>
<el-form :inline="true">
<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-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>
将新建的三级分类组件变为全局组件
src/components/index.ts
import Category from "./Category/index.vue";
//...
const allGlobalComponent: any = {
//...
Category,
};
export default {
install(app: any) {
//...
Object.keys(allGlobalComponent).forEach((key) => {
app.component(key, allGlobalComponent[key]);
});
},
};