灏天阁

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]);
    });
  },
};

- Book Lists -