Element UI组件

原创

HLee

修改于 2021-06-28 14:50:33

2.7K0

修改于 2021-06-28 14:50:33

文章被收录于专栏：房东的猫

简介

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

Element UI组件官方网址

Element UI标签

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。构建整个页面框架的标签。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器，构建左侧测单。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

<el-menu>：构建左侧菜单内容。

常用属性：<el-menu :default-openeds="['1', '3']">

default-openeds="['1', '3']"：默认打开某一个菜单，通过index值来关联。注意：这里的index指的是子标签<el-submenu index="1">的值

default-active="['1-1']"：默认选中某一个菜单，通过index值来关联。注意：这里的index指的是子标签<el-menu-item index="1-1">

模板属性：
<el-menu
      :default-active="$route.path"
      :collapse="isCollapse"
      :background-color="variables.menuBg"
      :text-color="variables.menuText"
      :active-text-color="variables.menuActiveText"
      :unique-opened="false"
      :collapse-transition="false"
      router
      mode="vertical">......</el-menu>

注意：

要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
导航当前项，在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

<el-submenu>：可展开的菜单。

常用属性：<el-submenu index="1">

index="1"：文本类型，不可以是数值类型。要是不指定的话，所有导航会使用相同index，会出现同时打开同时关闭现象。

<template>：对应的是<el-submenu>的页面显示的菜单名。

常用属性：
<template slot="title"><i class="el-icon-message"></i>导航一</template>

<i>：设置菜单图标，通过class属性控制。

常用属性：<i class="el-icon-message"></i>

class属性分别代表不同小图标
    el-icon-message：信封
    el-icon-mecu：四方格
    el-icon-setting：齿轮

<el-menu-item-group>：

<el-menu-item-group>
     <template slot="title">分组一</template>
     <el-menu-item index="1-1">选项1</el-menu-item>
     <el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>

<el-menu-item>：菜单的子节点，不可展开的。

常用属性：<el-menu-item index="1-1">选项1</el-menu-item>

index="1-1"：菜单下标

模板属性：
<el-menu-item
      :index="path"   // vue得route对象里的path
>......</el-menu-item>

Table 表格

Pagination 分页

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

element ui

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

element ui

登录后参与评论

0 条评论

热度