Vue element-ui

最新推荐文章于 2023-09-14 18:34:58 发布

m0_62643041

最新推荐文章于 2023-09-14 18:34:58 发布

阅读量127

点赞数

分类专栏： Vue项目文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_62643041/article/details/127835115

版权

这篇博客介绍了在Vue项目中使用Element-UI框架进行面包屑导航、卡片视图区域的构建，包括警告区域、选择商品分类区，以及标签页的实现。详细阐述了如何按需导入组件、设置属性和交互，如Breadcrumb组件的全局注册，Alert的closable属性，级联选择器的控制，以及动态和静态参数在tabs标签页的渲染和编辑操作。

摘要由CSDN通过智能技术生成

参数分类页1

1.面包屑导航区域

1.1按需在plugins>element.js中导入Breadcrumb，BreadcrumbItem同时注册为全局组件

import {Breadcrumb，BreadcrumbItem} from 'element-ui'，同时注册为全局组件Vue.use(Breadcrumb)Vue.use(BreadcrumbItem）

  <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

2.卡片视图区

2.1警告区域

按需导入Alert，并注册为全局变量，closable是否可关闭，这里动态去掉除后面的叉号，

expandTrigger 次级菜单的展开方式

      <!-- 警告区域 -->
      <el-alert show-icon title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false"></el-alert>

2.2选择商品分类区

获取所有商品分类：在getCateList中结合API文档发起get请求，获取所有的商品分类列表并保存在data中的catelist，

    created() {
      this.getCateList()
    },
    methods: {
      //获取所有的商品分类的列表
      async getCateList() {
        const {
          data: res
        } = await this.$http.get('categories')
        if (res.meta.status !== 200) {
          return this.$message.error("获取商品列表失败")
        }
        this.catelist = res.data
        // return this.$message.success("获取商品列表成功")
        console.log(this.catelist)
      },<