网站快速成型工具-Element UI

Posted 2022-01-01 一只楠喃

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站快速成型工具-Element UI相关的知识，希望对你有一定的参考价值。

Element UI

Element UI
1 什么是Element UI？？？？
2 搭建环境
3 布局
4 导航条
5 表格：查询列表
6 表单
7 常见组件
8 Tree组件

学习方式我们还是按三布来的方式，我觉得这样学比较明白（如果有其他想法留言给我~~）

Element UI

1 什么是Element UI？？？？

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
- Element UI是基于Vue 2.0的
- Element UI 提供一组组件
- Element UI 提供组件的参考实例, 直接复制
官方网站：
https://element.eleme.cn/#/zh-CN/component/installation

2 搭建环境

2.1 创建vue项目

步骤一: 通过 vue-cli创建项目
vue create eui01
步骤二：运行项目

2.2 安装 element-ui组件

npm i element-ui --save

2.3 Element UI 引入

官方提供了2种引入方式：完整引入、按需引入
完整引入：引入了eui所有的组件，学习时/开发时常用
按需引入：引入需要的组件，生产环境下使用。
完整引入
1. 导入 element ui 组件库
1. 导入 element ui css样式
1. 并将element ui 注册给vue

/* 导入element-ui样式
/
import ‘element-ui/lib/theme-chalk/index.css’
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’
/ element-ui所有组件
*/
import ElementUI from ‘element-ui’
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue(
router,
store,
render: h => h(App)
).$mount(’#app’)

3 布局

3.1 布局

使用element-ui的布局容器(Container) 进行页面布局
官方文档 : https://element.eleme.cn/#/zh-CN/component/container
步骤一: 修改src/main.js 导入 element-ui 样式和组件

/* 导入element-ui样式
/
import ‘element-ui/lib/theme-chalk/index.css’
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’
/ element-ui所有组件
*/
import ElementUI from ‘element-ui’
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue(
router,
store,
render: h => h(App)
).$mount(’#app’)

步骤二: 删除 src/App.vue所有内容, 拷贝布局模板和样式

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default 


</script>

<style>
  /* 稍后删除 */
  .el-header, .el-footer 
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  
</style>

3.2 reset.css

布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式

步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td 
    margin: 0;
    padding: 0;


table 
    border-collapse: collapse;
    border-spacing: 0;


fieldset,img 
    border: 0;


address,caption,cite,code,dfn,em,strong,th,var 
    font-style: normal;
    font-weight: normal;


ol,ul 
    list-style: none;


caption,th 
    text-align: left;


h1,h2,h3,h4,h5,h6 
    font-size: 100%;
    font-weight: normal;

重置样式参考：https://www.cnblogs.com/weizhxa/p/9885329.html

步骤二: 修改 src/main.js 导入 app.css 样式

/** 导入公共样式
/
import ‘@/assets/app.css’
/ 导入element-ui样式
/
import ‘element-ui/lib/theme-chalk/index.css’
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’
/ element-ui所有组件
*/
import ElementUI from ‘element-ui’
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue(
router,
store,
render: h => h(App)
).$mount(’#app’)

3.3 满屏填充

在App.vue中，添加样式

html, body, .el-container
height: 100%;

4 导航条

4.1 需求

4.2 导航条

使用导航菜单(NavMenu) 完成导航条效果
官方文档 : https://element.eleme.cn/#/zh-CN/component/menu

步骤1: 修改 src/App.vue

<template>
  <div id="app">
    <el-container>
      <el-header>
        <!-- 导航条 -->
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">学生管理</template>
            <el-menu-item index="/studentList">学生列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">个人中心</template>
            <el-menu-item index="/login">登录</el-menu-item>
            <el-menu-item index="/register">注册</el-menu-item>
          </el-submenu>
          <el-menu-item index="/cart">
           购物车
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
         版权
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default 

</script>

<style>
  .el-header, .el-footer 
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0;
  
</style>

4.3 路由

点击”首页” 和 “购物车” 可以调整页面

步骤一: 修改 src/App.vue 设置路由视图

<template>
  <div id="app">
    <el-container>
      <el-header>
        <!-- 导航条 -->
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">学生管理</template>
            <el-menu-item index="/studentList">学生列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">个人中心</template>
            <el-menu-item index="/login">登录</el-menu-item>
            <el-menu-item index="/register">注册</el-menu-item>
          </el-submenu>
          <el-menu-item index="/cart">
           购物车
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
         版权
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default 

</script>

<style>
  .el-header, .el-footer 
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0;
  
</style>

步骤二: 编写测试组件（Home.vue和Cart.vue）

4.4 页面刷新导航选中问题

默认情况：点击后的默认效果

刷新页面, 导航条的选中状态消失
修复: 修改 App.vue页面

<template>
  <div id="app">
    <el-container>
      <el-header>
        <!-- 导航条 -->
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
        ```
## 4.5 页眉![在这里插入图片描述](https://img-blog.csdnimg.cn/630074110bf049928f6a11ec55d9b287.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5Y-q5qWg5ZaD,size_20,color_FFFFFF,t_70,g_se,x_16)

  <el-footer>
    版权
  </el-footer>
  ```

5 表格：查询列表

5.1 测试页面

5.2 基本表格

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" >
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default 
  data () 
    return 
      studentList: [
        
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        ,
        
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        
      ]
    
  

</script>

<style>

</style>

5.3 表格修饰

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border >
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>

5.4 多选

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default 
  methods: 
    handleSelectionChange(val) 
      this.multipleSelection = val;  //保存选中的数据
    
  ,
  data () 
    return 
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        ,
        
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        
      ]
    
  

</script>

<style>

</style>

5.5 自定义模板

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default 
  methods: 
    handleSelectionChange(val) 
      this.multipleSelection = val;  //保存选中的数据
    ,
    handleEdit(index, row) 
      console.log(index, row);
    ,
    handleDelete(index, row) 
      console.log(index, row);
    
  ,
  data () 
    return 
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        ,
        
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        
      ]
    
  

</script>

<style>

</style>

展示“爱好”信息

    studentList: [
        
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18,
          hobbies: ['抽烟','喝酒','烫头']
        ,
        
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21,
          hobbies: ['抽烟','烫头']
        
      ]

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
      <el-table-column label="爱好" >
        <template slot-scope="scope">
          <el-tag type="warning" v-for="(hobby,index) in scope.row.hobbies" :key="index">hobby</el-tag>
        </template>

      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default 
  methods: 
    handleSelectionChange(val) 
      this.multipleSelection = val;  //保存选中的数据
    ,
    handleEdit(index, row) 
      console.log(index, row);
    ,
    handleDelete(index, row) 
      console.log(index, row);
    
  ,
  data () 
    return 
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18,
          hobbies: ['抽烟','喝酒','烫头']
        ,
        
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21,
          hobbies: ['抽烟','烫头']
        
      ]
    
  

</script>

<style>
  .el-tag + .el-tag 
    margin-left: 10px;
  
</style>

小结！
标签：

el-table ：用于绘制表格
- 属性：
  - data：需要显示的数据
  - stripe：创建带斑马纹的表格
  - border：带边框表格
el-table-column：用于设置表格的列
- 属性：
  - label：列名
  - prop：对应对象中的键名
  - width：列宽
  - type：selection 多选框
template slot-scope=“scope”：内容嵌入，scope

5.7 条件查询

<!-- 条件表单 start -->
    <el-form :inline="true" :model="studentVo" size="mini" class="demo-form-inline">
      <el-form-item label="班级">
        <el-select v-model="studentVo.cid" placeholder="请选择班级">
          <el-option label="Java12班" value="c001"></el-option>
          <el-option label="Java34班" value="c002"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentVo.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="11">
          <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄"></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 条件表单 end -->

5.8 分页条

    <!-- 分页条start -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    <!-- 分页条end -->

6 表单

6.1 简单表单：登录

显示登录页面：Login.vue
登录表单效果

<template>
  <el-card class="box-card">
    <el-form :model="user" label-width="80px" ref="loginFormRef">
      <el-form-item label="用户名">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default 
  data() 
    return 
      user: 
        username: '',
        password: ''
      
    
  ,

</script>

<style>
  .box-card 
    width: 480px;
  
</style>

6.2 复杂表单：注册

<template>
  <el-card class="box-card">
    <el-form :model="user" label-width="80px" ref="loginFormRef">
      <el-form-item label="用户名">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="user.repassword" prefix-icon="el-icon-lock" type="password" placeholder="请再次输入密码"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="user.edu" placeholder="请选择你的学历">
          <el-option label="小班" value="xb"></el-option>
          <el-option label="中班" value="zb"></el-option>
          <el-option label="大班" value="db"></el-option>
          <el-option label="学前班" value="xqb"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="爱好">
        <el-checkbox-group v-model="user.hobbies">
          <el-checkbox label="抽烟" name="type"></el-checkbox>
          <el-checkbox label="喝酒" name="type"></el-checkbox>
          <el-checkbox label="烫头" name="type"></el-checkbox>
          <el-checkbox label="蹦迪" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="婚否">
        <el-switch v-model="user.marry"></el-switch>
      </el-form-item>
      <el-form-item label="省市县">
        <el-cascader
          v-model="user.city"
          :options="cityList"
          ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default 
  data() 
    return 
      user: 
        username: 'jack',
        password: '1234',
        repassword: '1234',
        birthday: '2020-10-07',
        edu: 'db',
        gender: '女',
        hobbies: ['抽烟','烫头'],
        marry: true,
        city: ['jiangsu', 'suqian', 'shuyang'],
      ,
      cityList: [
        
          value: 'jiangsu',
          label: '江苏',
          children: [
            
              value: 'suqian',
              label: '宿迁',
              children: [
                
                  value: 'shuyang',
                  label: '沭阳',
                ,
                
                  value: 'siyang',
                  label: '泗阳',
                
              ]
            ,
            
              value: 'lianyungang',
              label: '连云港',
            
          ]
        
      ]

    
  ,
  methods: 
    login() 
      alert('登录中...')
    
  ,

</script>

<style>
  .box-card 
    width: 480px;
  
</style>

6.3 表单校验

设置校验规则、确定校验属性
编写校验规则

rules:
校验属性: [ 规则1, 规则2, … ]

required: true, message: ‘请输入用户名’, trigger: ‘blur’ ,
min: 3, max: 5, message: 用户名长度必须3-5之间, trigger: ‘blur’

提交表单时，校验

<template>
  <el-card class="box-card">
    <el-form :model="user" :rules="rules" label-width="80px" ref="loginFormRef">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default 
  data() 
    return 
      user: 
        username: '',
        password: ''
      ,
      rules: 
        username: [
           required: true, message: '请输入用户名', trigger: 'blur' ,
           min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' 
        ],
        password: [
           required: true, message: '请输入密码', trigger: 'blur' ,
           min: 3, max: 5, message: `密码长度必须3-5之间`, trigger: 'blur' 
        ]
      
    
  ,
  methods: 
    login() 
      this.$refs.loginFormRef.validate(valid => 
        if(valid) 
          // 校验通过
          console.info('通过')
         else 
          // 校验未通过
           console.info('未通过')
        
      )
    
  ,

</script>

<style>
  .box-card 
    width: 480px;
  
</style><template>
  <el-card class="box-card">
    <el-form :model="user" :rules="rules" label-width="80px" ref="loginFormRef">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default 
  data() 
    return 
      user: 
        username: '',
        password: ''
      ,
      rules: 
        username: [
           required: true, message: '请输入用户名', trigger: 'blur' ,
           min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' 
        ],
        password: [
           required: true, message: '请输入密码', trigger: 'blur' ,
           min: 3, max: 5, message: `密码长度必须3-5之间`, trigger: 'blur' 
        ]
      
    
  ,
  methods: 
    login() 
      this.$refs.loginFormRef.validate(valid => 
        if(valid) 
          // 校验通过
          console.info('通过')
         else 
          // 校验未通过
           console.info('未通过')
        
      )
    
  ,

</script>

<style>
  .box-card 
    width: 480px;
  
</style>

6.4 自定义校验

<template>
  <div>
    <h3>登录校验</h3>
    <el-card class="login-card">
      <!-- 登录表单start -->
      <el-form ref="loginForm" :model="user" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input v-model="user.repassword" prefix-icon="el-icon-lock" placeholder="请再次输入密码" show-password clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 登录表单end -->
    </el-card>
  </div>
</template>

<script>
export default 
  data() 
    //校验： 密码和确认密码一致
    var validatePass2 = (rule, value, callback) => 
      if (value !== this.user.password) 
        callback(new Error('两次输入密码不一致!'));
       else 
        callback();
      
    ;
    return 
      user: 
        username: '',
        password: '',
        repassword: ''
      ,
      rules: 
        username: [
           required: true, message: '请输入用户名', trigger: 'blur' ,
           min: 3, max: 5, message: '用户名长度在 3 到 5 个字符', trigger: 'blur' 
        ],
        password: [
           required: true, message: '请输入密码', trigger: 'blur' ,
           min: 3, max: 5, message: '密码长度在 3 到 5 个字符', trigger: 'blur' 
        ],
        repassword: [
           required: true, message: '请再次输入密码', trigger: 'blur' ,
           validator: validatePass2, trigger: 'blur' 
        ]
      
    
  ,
  methods: 
    login() 
      // js 对象调用有2种方式：this.user.username  或 this.user['username']
      this.$refs.loginForm.validate((valid) => 
        if (valid) 
          // 校验通过
          alert('submit!');
         else 
          // 校验失败
          console.log('error submit!!');
          return false;
        
      );
    
  ,

</script>

<style>
  .login-card
    width: 480px;
  
</style>

7 常见组件

7.1 按钮 Button

<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

<script>
export default 


</script>

<style>

</style>

7.2 消息提示 Message

this.$message.success('这是一条成功消息')
this.$message.error('这是一条错误消息')

<template>
  <div>
    <el-button type="info" @click="open1">消息</el-button>
    <el-button type="success" @click="open2">成功</el-button>
    <el-button type="warning" @click="open3">警告</el-button>
    <el-button type="danger" @click="open4">错误</el-button>
  </div>
</template>

<script>
export default 
  methods: 
    open1() 
      this.$message.info('这是一条提示信息')
    ,
    open2() 
      this.$message.success('这是一条成功消息')
    ,
    open3() 
      this.$message.warning('这是一条警告消息')
    ,
    open4() 
      this.$message.error('这是一条错误消息')
    ,
  ,

</script>

<style>

</style>

7.3 弹框 MessageBox：确认消息


      this.$confirm('这是提示信息','这是标题',confirmButtonText: '确定按钮',cancelButtonText: '取消按钮',type: 'warning')
      .then(()=>
        // 确定按钮回调
        this.$message.success('删除了')
        // ajax操作
      )
      .catch(()=>
        // 取消按钮回调
        this.$message.error('取消了')
      )

7.4弹出框

编写弹出层

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <!-- 弹出层 -->
    <el-dialog title="这是标题" :visible.sync="dialogVisible" >
      我是一段正文信息
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default 
  data() 
    return 
      dialogVisible: false,  //是否显示弹出层
    
  ,

</script>
<style>

</style>

7.5 抽屉

<template>
  <div>
    <el-button type="primary" @click="drawerFormVisible = true">修改学生</el-button>

    <!-- 抽屉start -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawerFormVisible"
      direction="rtl"
      :before-close="handleClose">
      <el-form :model="student" label-width="80px">
        <el-form-item label="姓名" >
          <el-input v-model="student.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级" >
          <el-select v-model="student.cid" placeholder="请选择班级">
            <el-option label="Java12班" value="c001"></el-option>
            <el-option label="Java34班" value="c002"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="drawerFormVisible=false">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 抽屉end -->
  </div>
</template>

<script>
export default 
  data() 
    return 
      drawerFormVisible: false,
      student: 

      
    
  ,
  methods: 
    handleClose(done) 
      this.$confirm('确认关闭？')
        .then(_ => 
          //确定按钮
          done();   //结束回调
        )
        .catch(_ => 
          //取消
        );
    
  ,

</script>

<style>

</style>

7.6 标签页

<template>
  <div>
    <el-tabs v-model="activeName" >
      <el-tab-pane label="用户管理" name="first">
        用户管理
        <el-button type="primary" @click="activeName = 'second'">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        配置管理
        <el-button type="primary" @click="activeName = 'third'">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third">
        角色管理
        <el-button type="primary" @click="activeName = 'fourth'">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">
        定时任务补偿
        <el-button type="primary" @click="$message.success('成功了')">完成</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default 
  data() 
    return 
      activeName: 'first'
    ;
  

</script>

<style>

</style>

8 Tree组件

8.1 表结构

# 分类表
CREATE TABLE t_category(
  tid VARCHAR(32) PRIMARY KEY COMMENT '分类ID',
  tname VARCHAR(50) COMMENT '分类名称',
  `status` INT DEFAULT '1' COMMENT '分类状态：0 禁用、1 启用',
  parent_id VARCHAR(32) COMMENT '父分类ID',
  priority INT COMMENT '优先级，越小，同级显示的时候越靠前',
  depth INT COMMENT '深度，从1递增'
);

INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1000','男装/运动户外', NULL ,1,1);
INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2000','手机/数码', NULL ,2,1);
INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3000','零食/生鲜', NULL ,3,1);

#'t1000','男装/运动户外'
INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1100','上装', 't1000' ,1,2);
INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1200','裤子', 't1000' ,2,2);
1月14-Element
 vs2003：快速片段工具
 快速访问element-ui
 猿创征文｜如何使用 Element UI？ 以登录框为例带你感受一下基础使用
 Element-UI安装使用教程
 CSS可视化工具-助力快速开发css片段