ElementUI

<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>

<el-container>

顶栏容器

<el-header>

侧边栏容器

<el-aside>

主要区域容器

<el-main>

底栏容器

<el-footer>

布局容器

行列布局

然后在不同的页面里面可以选择el-container    el-aside    el-main来实现侧边栏

可以在App.vue里面采用el-container    el-header    router-link    el-footer的模式

基本方法

布局

personaldetails.vue

实例vue文件 - personaldetails.vue这个有点搞复杂了，用下面的tabs但这个样式控制比较简单

一般用于各个板块结构不同的情况，一级路径

基本用途

<template>  <div>    <el-header style=\"height: 50px;padding: 0px;\">      <div class=\"personal-head\">        <p1>个人中心</p1>      </div>    </el-header>    <el-contaier style=\"display: flex; flex-direction: row;\">      <el-aside width=\"200px\" style=\"padding-top: 50px;\">        <el-menu :default-active=\"activeIndex\" class=\"el-menu-demo\" @select=\"handleSelect\" background-color=\"transparent\">          <router-link to=\"/personaldetails/myprofile\">            <el-menu-item>                个人资料            </el-menu-item>          </router-link>          <router-link to=\"/personaldetails/mycourses\">            <el-menu-item>                我的课程            </el-menu-item>          </router-link>          <router-link to=\"/personaldetails/myarticle\">            <el-menu-item>                我的发帖            </el-menu-item>          </router-link>        </el-menu>      </el-aside>      <el-main style=\"padding-top: 50px;\">        <router-view></router-view>      </el-main>    </el-contaier>  </div></template>

实例 - 非一级路径侧边栏这个有点搞复杂了，用下面的tabs但这个样式控制比较简单

顶、侧菜单导航栏el-menu

vue+element-ui Tab切换不同组件请求不同接口加载不同数据

参考资料

各个板块结构相似，数据不同

用el-tab-pane包裹住组件

基本使用

tabs.scss源码

tabs.css

tabs.css 文件

element 的el-tabs默认选中项改变背景颜色问题

.el-tabs__header{  padding-top: 30px;  padding-left: 15px;  position: relative;  margin: 0 0 15px}

侧边栏包裹框

更改样式

标签导航el-tabs

NavBar.vue

实例vue文件- NavBar.vue

<template>  <el-row id=\"navbar\">    <el-col :span=\"16\" class=\"hidden-sm-and-down\">      <el-menu :default-active=\"this.$store.state.activeIndex\" class=\"el-menu-demo\"               mode=\"horizontal\"               text-color=#e3d9d7 active-text-color=#409EFF               id=\"nav-menu-large\" @select=\"handleSelect\">        <el-menu-item index=\"1\">音乐史</el-menu-item>        <el-menu-item index=\"2\">作词</el-menu-item>        <el-menu-item index=\"3\">作曲</el-menu-item>        <el-menu-item index=\"4\">混音</el-menu-item>        <el-menu-item index=\"5\">乐器</el-menu-item>        <el-menu-item index=\"6\">软件</el-menu-item>        <el-menu-item index=\"7\">音源</el-menu-item>        <el-menu-item index=\"8\">采样包</el-menu-item>      </el-menu>    </el-col>    <el-col :span=\"8\" id=\"search-box-large\" class=\"hidden-sm-and-down\">      <el-input placeholder=\"请输入内容\" v-model=\"input\"                @keyup.enter.native=\"handleKeyword(input)\"                style=\"width: 300px;\">        <el-button slot=\"append\" icon=\"el-icon-search\"></el-button>      </el-input>    </el-col>    <el-col :span=\"22\" id=\"search-box-mobile\" class=\"hidden-md-and-up\">      <el-input placeholder=\"搜索文章\" v-model=\"input\"                @keyup.enter.native=\"handleKeyword(input)\"                style=\"width: 300px;\">        <el-button slot=\"append\" icon=\"el-icon-search\"></el-button>      </el-input>    </el-col>    <el-col :span=\"2\" class=\"hidden-md-and-up\" id=\"mobile-search-switch\">      <el-image          @click=\"drawer = true\"          style=\"width: 30px; height: 20px\"          :src=\"require('@/assets/side-menu-switch.png')\"          fit=\"fill\">      </el-image>      <el-drawer          title=\"板块分区\"          :visible.sync=\"drawer\"          :with-header=\"false\"          style=\

代码实例

可以隐藏的导航栏

实例 - 抽屉导航

其他导航方式

导航

vue 中el-card点击事件失效解决

点击失效

属性

卡片el-card

分页el-pagination

ArticleList.vue

实例vue文件 - ArticleList.vue

<template>  <div id=\"article-list-container\">    <el-row id=\"article-list-content\">      <ArticleCard :articleID=data._id :title=data.title                   :cover=data.cover                   :type=\"data.type\" :createDate=\"data.createDate\"                   class=\"articleCard\"                   v-for=\

实例 - 卡片分页

列表

数据展示

element-ui里el-form的lable颜色怎么修改？

如何修改el-form标签中label的文字颜色

label颜色

表单验证

表单el-form

vue+element-ui实现搜索框

搜索框

vue使用element-ui的el-input监听不了回车事件

回车绑定失效

输入框el-input

elementUI select组件 默认选择第一项

下拉选择器el-select

简单设置el-date-picker的默认当前时间

new Date()日期格式处理

el-date-picker

数据输入

中文官网

npm install element-ui

npm

yarn add element-ui

yarn

下载

import ElementUI from \"element-ui\";

没有这一行会样式错误

import 'element-ui/lib/theme-chalk/index.css';

添加两行，头部导入

Vue.use(ElementUI);

添加一行，注册

new Vue({    font color=\"#f15a23\

添加一行，样式

开始

element-ui源码阅读-样式

vue elementUi通过编辑源码更改样式

github element UI CSS样式文件目录

样式源码

element el-image标签加载本地图片失败解决方法

图片

图片el-image

头像el-avatar

图标

图标图形

正上方，自动消失

this.$message()

消息提醒

右上方，不会自动消失

this.$notify()

通知

<template>  <el-button type=\"text\" @click=\"open\

实例

this.$alert()

弹框MessageBox

提醒

Element-UIVue 2.0组件库