目錄
- 1、Element-UI簡介
- 2、Element-UI起步
- 3、Element插件和學習建議
- 4、Container布局容器
- 5、Layout布局
- 6、button按鈕
- 7、Icon圖示
- 8、input輸入框
- 9、Form表單基礎
- 10、Radio單選按鈕
- 11、Checkbox復選框
- 12、Switch開關
- 13、Select選擇器
- 14、Cascader級聯選擇器
- 15、DateTimePicker日期時間選擇器
- 16、Validator表單校驗
- 17、自定義校驗規則
- 18、表單校驗綜合案例
- 19、Table表格
- 20、Pagination分頁
- 21、Dialog對話框
- 22、實戰一、環境準備
- 23、實戰二、分頁查詢
- 24、實戰三、添加
- 25、實戰四、洗掉功能
- 26、實戰五、更新功能
- 27、Card卡片
- 28、Breadcrumb面包屑
- 29、Steps進度條
- 30、導航選單的基本使用
- 31、導航選單的折疊
- 32、導航選單的select事件
- 33、導航的路由模式
- 34、組合應用
- 35、Avatar頭像
- 36、Dropdown下拉選單
- 37、Alert警告
- 38、頁頭
- 39、Loading加載
- 40、Message訊息提示
- 41、MessageBox彈窗
- 42、Tabs標簽頁
- 43、Tree樹型控制元件的基本使用
- 44、Tree樹型控制元件的可選擇
- 45、Tree樹型控制元件-從服務器獲取資料
- 46、Tree樹型控制元件-自定義節點內容
1、Element-UI簡介
回傳目錄
element-ui，一套為開發者，設計師和產品經理準備的基于Vue的桌面端組件庫，使用前端框架封裝的代碼幫助工程師快速開發
Element-UI的特點：
豐富的組件
element-ui的組件分為六大類：分別是基礎組件、表單類組件、資料類組件、提示類組件、導航類組件和其它型別組件，這些豐富的基礎組件能很好的滿足大部分PC端to B業務開發需求
成熟的生態
element-ui是國內做Vue的UI框架中最早，也最成熟的一家，用戶群體多，遇到問題基本都能解決
優秀的開發檔案
element-ui檔案和demo是融為一體的，我們打開它的檔案，可以看到檔案不僅介紹了每個組件的使用方式，還展示看組件的各種示例，并且還可以清楚的看到每個示例的原始碼，對用戶而言非常友好
自定義主題
element-ui的一大特色是支持自定義主題，你可以使用在線主題編輯器，可以修改Element所有全域和組件的Design Tokens，并可以方便地實時預覽樣式改變后的視覺
2、Element-UI起步
回傳目錄
官方推薦使用npm的方式使用element-ui，接下來我們借助vue-cli專案演示element-ui的使用
2.1、第1個Element-UI專案
1.新建vue-cli專案：
Vue CLI詳解
我使用vuecli4版本
2.在專案中添加element-ui庫
進入專案目錄，執行安裝element-ui的命令：
npm install element-ui --save
3.在main.js中配置element-ui：
//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用插件
Vue.use(ElementUI);
element-ui樣式初體驗：
<template>
<div id="app">
<hr>
<el-button type="primary">elementUI的按鈕</el-button><!--藍色按鈕-->
<el-button type="danger">elementUI的按鈕</el-button><!--紅色按鈕-->
<el-date-picker type="date"></el-date-picker><!--日期-->
<hr>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style>
</style>
運行測驗：npm run serve
3、Element插件和學習建議
回傳目錄
打開WebStorm的設定，搜索并下載element插件
點擊install下載安裝，重啟
該插件為我們提供了默認補全功能
element-ui的學習建議
掌握核心的組件
不同的element-ui組件封裝不同的UI效果，element-ui有60多個組件，常用的組件并不多，抓住關鍵的常用組件即可
掌握典型語法
element-ui的組件功能都比較強大，也就有了大量的配置屬性，很多屬性并不常用，在掌握組件時，通過典型用法，掌握關鍵屬性即可
大膽試錯，多查官方檔案
學習任何新的知識都不要怕錯，多做多嘗試，在錯誤中學習掌握知識，官方示例非常全面，在遇到問題時，可以閱讀官方檔案，對照檔案示例挑錯
熟能生巧，巧能生精
世上無難事只怕有心人，多敲多練，哪個不熟就針對性練習哪個，無需死記硬背，練多了自然就掌握了
4、Container布局容器
回傳目錄
用于布局的容器組件，方便快速搭建頁面的基本結構：
<el-container>:外層容器
<el-header>:頂欄容器
<el-aside>:側邊欄容器
<el-main>:主要區域容器
<el-footer>:底欄容器
常見的頁面布局
代碼體驗展示：
在view包下建立Home.vue組件:
<template>
<div id="app">
<router-link to="/Home">按鈕</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'App',
}
</script>
<style>
</style>
路由配置：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = () => import("../views/Home.vue")
const routes = [
{
path: '/Home',
name: 'Home',
component:Home,
},
]
const router = new VueRouter({
routes,
mode:'history'
})
export default router
App.vue:
運行測驗：
調樣式：點加標簽名即可
運行：
加入aside使其并列排序：（因為容器是單行排列的，所以我們要借助el-container）
總結：
- el-container內有el-header或者el-footer子元素，全部子元素呈垂直排列
- 需要水平左右排列時，需要再定義el-container包含水平左右排列的子元素
為了方便演示，我們給路由添加默認路徑：
5、Layout布局
回傳目錄
布局可以快速的將一塊區域，分成多列，每列最多可以分成基礎的24分欄，迅速簡便地創建布局
5.1、基礎布局
通過row和col組件，并通過col組件的span屬性我們就可以自由地組合布局
Layout.vue:
<template>
<div>
<el-row :gutter="10">
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "Layout"
}
</script>
<style scoped>
.el-row{
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
}
.el-col{
border-radius: 4px;
}
.bg-purple-dark{
background-color: #99a9bf;
}
.bg-purple{
background-color: #d3dce6;
}
.bg-purple-light{
background-color: #e5e9f2;
}
.grid-content{
border-radius: 4px;
min-height: 36px;
}
.row-bg{
padding: 10px 0;
background-color: #f9fafc;
}
</style>
路由注冊：
上面的可以直接通過地址訪問：
設定路由本頁訪問：將/Layout設定為/Home的子路徑：
在Home.vue中設定展出按鈕和展出位置：
運行測驗：
5.2、分欄間隔：
row組件提供gutter屬性來指定每一欄之間的間隔：
5.3、分欄偏移：
通過制定col組件的offset屬性可以指定分欄位置向右偏移的欄數
組件之間不會擠壓
5.4、對齊方式：
將row組件type屬性賦值為flex，可以啟用flex布局，并可通過justify屬性來指定start，center，end，space-between，space-around其中的值來定義子元素的排版方式
6、button按鈕
回傳目錄
element-ui提供了常用的操作按鈕組件：el-button
6.1、基礎用法
通過type屬性定義按鈕的風格
Button.vue：
<template>
<div>
<el-row :gutter="10">
<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>
</el-row>
</div>
</template>
<script>
export default {
name: "Button"
}
</script>
<style scoped>
</style>
路由配置：
App.vue:
運行測驗：
路由顯示使用方法后續不再展示（不懂的請訂閱我的Vue專欄學習，或者直接看：Vuejs第五篇（vue-router路由和tabbar））
路由展示的
資料組件分離式寫法：
去掉li的樣式代碼自己寫
運行：
6.2、按鈕樣式：
通過plain、round、circle和disabled屬性來定義Button的樣式
<template>
<div>
<el-row :gutter="10">
<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>
</el-row>
<el-row :gutter="10">
<el-button plain>樸素按鈕</el-button>
<el-button type="primary" plain>主要按鈕</el-button>
<el-button type="success" plain>成功按鈕</el-button>
<el-button type="info" plain>資訊按鈕</el-button>
<el-button type="warning" plain>警告按鈕</el-button>
<el-button type="danger" plain>危險按鈕</el-button>
</el-row>
<el-row :gutter="10">
<el-button round>圓角按鈕</el-button>
<el-button type="primary" round>主要按鈕</el-button>
<el-button type="success" round>成功按鈕</el-button>
<el-button type="info" round>資訊按鈕</el-button>
<el-button type="warning" round>警告按鈕</el-button>
<el-button type="danger" round>危險按鈕</el-button>
</el-row>
<el-row :gutter="10">
<el-button circle>大圓角按鈕</el-button>
<el-button type="primary" circle>主要按鈕</el-button>
<el-button type="success" circle>成功按鈕</el-button>
<el-button type="info" circle>資訊按鈕</el-button>
<el-button type="warning" circle>警告按鈕</el-button>
<el-button type="danger" circle>危險按鈕</el-button>
</el-row>
<el-row :gutter="10">
<el-button disabled>禁用按鈕</el-button>
<el-button type="primary" disabled>主要按鈕</el-button>
<el-button type="success" disabled>成功按鈕</el-button>
<el-button type="info" disabled>資訊按鈕</el-button>
<el-button type="warning" disabled>警告按鈕</el-button>
<el-button type="danger" disabled>危險按鈕</el-button>
</el-row>
</div>
</template>
<script>
export default {
name: "Button"
}
</script>
<style scoped>
</style>
運行：
6.3、按鈕尺寸
Button組件提供除了默認值以外，還有3種額外的尺寸：medium、small、mini，通過設定size屬性來配置它們，可以在不同場景下選擇合適的按鈕尺寸
<el-row>
<el-button>默認按鈕</el-button>
<el-button size="medium">中等按鈕</el-button>
<el-button size="small">小型按鈕</el-button>
<el-button size="mini">超小按鈕</el-button>
</el-row>
6.4、按鈕組
使用<el-button-group>標簽來嵌套按鈕，可以構建關系更加緊密的一組按鈕
<el-button-group>
<el-button type="primary">編輯</el-button>
<el-button type="primary">分享</el-button>
<el-button type="primary">洗掉</el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一頁</el-button>
<el-button type="primary">下一頁<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
7、Icon圖示
回傳目錄
element-ui提供了一套常用的圖示集合
7.1、使用方法
為i標簽直接設定class為el-icon-iconName的屬性來使用圖示，例如
Icon.vue
<div>
<i class="el-icon-delete"></i>
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
</div>
更多的圖示可以查看官網
class設定為對應值即可（建議寫icon屬性）
8、input輸入框
回傳目錄
input輸入框組件必須使用v-model與資料系結，并且它總是會顯示Vue的系結值
8.1、type=text輸入框
使用clearable屬性即可得到一個可清空的輸入框
<el-row :gutter="10">
<el-input v-model="username" placeholder="請輸入資訊" type="text" clearable></el-input>
</el-row>
必須系結一個值：
可清空的意思是：
8.2、密碼框
使用show-password屬性即可得到一個可切換顯示隱藏的密碼框
<el-input v-model="password" placeholder="請輸入密碼" type="password" clearable show-password></el-input>
8.3、type=textarea文本域
通過設定autosize屬性可以使得文本域的高度能夠根據文本內容自動進行調整，并且autosize還可以設定為一個物件，指定最小行數和最大行數，對于型別為text或textarea的輸入框，可使用maxlength屬性限制最大輸入長度，還可通過設定show-word-limit屬性來展示字數統計
<el-row :gutter="10">
<el-input v-model="description" type="textarea" :autosize="{minRows:2,maxRows:4}" maxlength="200" show-word-limit></el-input>
</el-row>
8.4、尺寸
可通過size屬性指定輸入框的尺寸，除了默認的大小外，還提供了large、small和mini三種尺寸
<el-row :gutter="10">
<el-input v-model="input" placeholder="placeholder"></el-input>
<el-input v-model="input" placeholder="placeholder" size="medium"></el-input>
<el-input v-model="input" placeholder="placeholder" size="small"></el-input>
<el-input v-model="input" placeholder="placeholder" size="mini"></el-input>
</el-row>
8.5、帶圖示的輸入框
可以通過prefix-icon和suffix-icon屬性在input組件首部和尾部增加顯示圖示，也可以通過slot來放置圖示
第一種方式：
<el-row :gutter="10" type="flex" justify="space-around">
<el-col :span="3">slot方式</el-col>
<el-col :span="6">
<el-input v-model="input" placeholder="請選擇日期"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input>
</el-col>
<el-col :span="6">
<el-input v-model="input" placeholder="請輸入內容"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</el-col>
</el-row>
第二種方式：
<el-row :gutter="10" type="flex" justify="space-around">
<el-col :span="6">
<el-input v-model="input" placeholder="請選擇日期" suffix-icon="el-icon-date"></el-input>
</el-col>
<el-col :span="6">
<el-input v-model="input" placeholder="請輸入內容" prefix-icon="el-icon-search"></el-input>
</el-col>
</el-row>
8.6、復合型輸入框
可通過slot來指定在input中前置或者后置內容
<div>
<el-input v-model="input" placeholder="請輸入內容">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input v-model="input" placeholder="請輸入內容">
<template slot="append">.com</template>
</el-input>
</div>
9、Form表單基礎
回傳目錄
由輸入框、選擇器、單選框、多選框等控制元件組成，用于收集、校驗、提交資料
9.1、典型表單
在Form組件中，每一個表單域由一個From-Item組件構成，表單域中可以放置各種型別的表單控制元件，包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker，必須為表單的model屬性系結一個資料，表單的ref屬性類似id用戶標識一個表單
Form.vue：一個簡單的表單
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用戶名">
<el-input v-model="user.username" placeholder="請輸入用戶名"></el-input>
</el-form-item>
<el-form-item label="密碼">
<el-input v-model="user.password" placeholder="請輸入密碼"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登入</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Form",
data(){
return{
user:{
username:'',
password:''
}
}
}
}
</script>
<style scoped>
</style>
9.2、行內表單
當垂直方向空間受限且表單較簡單時，可以在一行內放置表單，設定inline屬性可以讓表單域變為行內的表單域
<el-form ref="form" :model="form" label-width="80px" :inline="true">
<el-form-item label="用戶名">
<el-input v-model="user.username" placeholder="請輸入用戶名"></el-input>
</el-form-item>
<el-form-item label="密碼">
<el-input v-model="user.password" placeholder="請輸入密碼"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登入</el-button>
</el-form-item>
</el-form>
9.3、對齊方式
通過設定label-position屬性可以改變表單域標簽的位置，可選值為top、left、right，當設為top時標簽會置于表單域的頂部
<el-form ref="form" :model="user" label-width="80px" label-position="top">
<el-form-item label="用戶名">
<el-input v-model="user.username" placeholder="請輸入用戶名"></el-input>
</el-form-item>
<el-form-item label="密碼">
<el-input v-model="user.password" placeholder="請輸入密碼"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登入</el-button>
</el-form-item>
</el-form>
10、Radio單選按鈕
回傳目錄
Radio單選框（在一組選項中進行單選）
10.1、基礎語法
由于選項默認可見，不宜過多，若選項過多，建議使用Select選擇器
添加為一組按鈕要使用label標簽指定屬性值，v-model系結為一組單選按鈕：
<el-radio v-model="user.sex" label="男">男</el-radio>
<el-radio v-model="user.sex" label="女">女</el-radio>
sex的屬性值為‘男’的時候男默認被選中，為‘女’的時候女默認被選中，且sex的值隨自選狀態而改變值
上面這種系結一組單選按鈕的方式并不簡單，現在讓我們來接觸一下簡單的系結
10.2、單選框組
當一組單選按鈕數量多時，再通過v-model分別為多個單選按鈕系結資料就會非常的繁瑣，此時可以通過el-radio-group簡化系結，在el-radio-group中系結v-model，在el-radio中設定好label即可，無需再給每一個el-radio系結變數，另外，單選框組還提供了change事件來回應變化，它會傳入一個引數value
<el-radio-group v-model="user.sex" @change="handleChange">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
11、Checkbox復選框
回傳目錄
基本使用
和單選框相似，復選框組件也使用label屬性定義按鈕值，使用v-model系結的資料必須是按鈕的label值
<el-row :gutter="10">
<el-checkbox v-model="favorites" label="吃" @change="handleChange">吃</el-checkbox>
<el-checkbox v-model="favorites" label="喝" @change="handleChange">喝</el-checkbox>
<el-checkbox v-model="favorites" label="玩" @change="handleChange">玩</el-checkbox>
<el-checkbox v-model="favorites" label="樂" @change="handleChange">樂</el-checkbox>
</el-row>
favorites此時必須為陣列，且有大于1的默認值
此時函式值回傳的是按鈕選中狀態，true或false
默認選中：
11.2、復選框組
當一組復選框數量多時，再通過v-model分別為多個復選框系結資料就會非常繁瑣，此時可以通過el-checkbox-group簡化系結，在el-checkbox-group中系結v-model，
在el-checkbox中設定好label即可，無需再給每一個el-checkbox系結數量
<el-checkbox-group v-model="favorites">
<el-checkbox v-for="item in favoritesList" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>
這種回圈遍歷的方式很不錯，推薦后面以后都這樣使用
12、Switch開關
回傳目錄
表示兩種相互對立的狀態間的切換，多用于觸發開關
12.1、基本用法：
系結v-model到一個Boolean型別的變數，可以使用active-color屬性與inactive-color屬性來設定開關的顏色，使用active-text屬性與inactive-text屬性來設定開關的文字描述
<template>
<div>
<el-row :gutter="10">
<el-switch v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="開"
inactive-text="關">
</el-switch>
</el-row>
</div>
</template>
<script>
export default {
name: "Switch",
data(){
return{
value:true
}
}
}
</script>
<style scoped>
</style>
12.2、擴展的value型別
開關可系結的資料默認為Boolean型別，開就是true，關就是false，可以通過active-value和inactive-value屬性自定義開和關的值
<template>
<div>
<el-row :gutter="10">
<el-switch v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="1"
inactive-text="0">
</el-switch>
</el-row>
</div>
</template>
<script>
export default {
name: "Switch",
data(){
return{
value:0
}
}
}
</script>
<style scoped>
</style>
個人愛好：
<template>
<div>
<el-row :gutter="10">
<el-switch v-model="value"
active-color="#13ce66"
inactive-color="gray"
active-text="用戶鎖定">
</el-switch>
</el-row>
</div>
</template>
<script>
export default {
name: "Switch",
data(){
return{
value:0
}
}
}
</script>
<style scoped>
</style>
13、Select選擇器
回傳目錄
當選項過多時，使用下拉選單展示并選擇內容，選擇器由el-Select標簽通過v-model系結資料，當選中的值發生變化時，會觸發change事件
Select.vue:
<template>
<el-row :gutter="10">
<el-select v-model="model" placeholder="請選擇食物">
<el-option
v-for="item in optionsList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-row>
</template>
<script>
export default {
name: "Select",
data(){
return{
model:'',
optionsList:[
{value:'1',label:'黃金糕'},{value: '2',label: '雙皮奶'},{value: '3',label: '蚵仔煎'},{value: '4',label: '龍須面'},
{value: '5',label: '北京烤鴨'}
]
}
}
}
</script>
<style scoped>
</style>
寫個回呼函式看看輸出內容：
輸出的value對應的值（這里是數字）
我們還可以設定clearable屬性：
14、Cascader級聯選擇器
回傳目錄
當一個資料集合有清晰的層級結構時，可通過級聯選擇器逐級查看并選擇
14.1、基礎用法
只需為Cascader的option屬性指定選項陣列即可渲染出一個級聯選擇器，通過props.expandTrigger可以定義展開子級選單的觸發方式，注意，此時使用v-model系結的資料必須是一個陣列，當選擇一個選項時，會觸發change事件
<template>
<div>
<div class="block">
<span class="demonstration">默認 click 觸發子選單</span>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"></el-cascader>
</div>
<div class="block">
<span class="demonstration">hover 觸發子選單</span>
<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
</div>
</div>
</template>
<script>
export default {
name:'Cascader',
data() {
return {
value: [],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '設計原則',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反饋'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '導航',
children: [{
value: 'cexiangdaohang',
label: '側向導航'
}, {
value: 'dingbudaohang',
label: '頂部導航'
}]
}]
}, {
value: 'zujian',
label: '組件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字體'
}, {
value: 'icon',
label: 'Icon 圖示'
}, {
value: 'button',
label: 'Button 按鈕'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 單選框'
}, {
value: 'checkbox',
label: 'Checkbox 多選框'
}, {
value: 'input',
label: 'Input 輸入框'
}, {
value: 'input-number',
label: 'InputNumber 計數器'
}, {
value: 'select',
label: 'Select 選擇器'
}, {
value: 'cascader',
label: 'Cascader 級聯選擇器'
}, {
value: 'switch',
label: 'Switch 開關'
}, {
value: 'slider',
label: 'Slider 滑塊'
}, {
value: 'time-picker',
label: 'TimePicker 時間選擇器'
}, {
value: 'date-picker',
label: 'DatePicker 日期選擇器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器'
}, {
value: 'upload',
label: 'Upload 上傳'
}, {
value: 'rate',
label: 'Rate 評分'
}, {
value: 'form',
label: 'Form 表單'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 標簽'
}, {
value: 'progress',
label: 'Progress 進度條'
}, {
value: 'tree',
label: 'Tree 樹形控制元件'
}, {
value: 'pagination',
label: 'Pagination 分頁'
}, {
value: 'badge',
label: 'Badge 標記'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加載'
}, {
value: 'message',
label: 'Message 訊息提示'
}, {
value: 'message-box',
label: 'MessageBox 彈框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 導航選單'
}, {
value: 'tabs',
label: 'Tabs 標簽頁'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉選單'
}, {
value: 'steps',
label: 'Steps 步驟條'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 對話框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 彈出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走馬燈'
}, {
value: 'collapse',
label: 'Collapse 折疊面板'
}]
}]
}, {
value: 'ziyuan',
label: '資源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '組件互動檔案'
}]
}]
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
<style scoped>
</style>
為el-cascader設定clearable屬性，則可將選擇器清空，為el-cascader添加filterable屬性即可啟用搜索功能，這里不再演示代碼，都挺簡單
15、DateTimePicker日期時間選擇器
回傳目錄
通過設定DatePicker組件的type屬性為datetime，即可在同一個選擇器里同時進行日期和時間的選擇
15.1、基本使用
通過v-model為日期選擇器系結資料，選擇日期時間后會觸發change事件
DatePicker.vue
<template>
<div>
<el-date-picker v-model="value"
type="date" placeholder="請選擇日期事件"
@change="handleChange">
</el-date-picker>
</div>
</template>
<script>
export default {
name: "DatePicker",
data(){
return{
value:''
}
},
methods:{
handleChange(value){
console.log(value)
console.log(this.value)
}
}
}
</script>
<style scoped>
</style>
我們可以指定日期輸出格式：（利用value-format屬性指定）
value-format="yyyy-MM-dd HH:mm:ss"
16、Validator表單校驗
回傳目錄
在防止用戶犯錯的前提下，盡可能讓用戶更早地發現并糾正錯誤
16.1、簡單案例：
Form組件提供了表單驗證功能，只需要通過rules屬性傳入約定的驗證規則，并將Form-Item的prop屬性設定為需校驗的欄位名即可
<template>
<el-form ref="form" :model="user" label-width="180px" :rules="formRules" label-position="top" size="medium">
<el-form-item label="用戶名" prop="username">
<el-input v-model="user.username" placeholder="請輸入用戶名"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="user.password" placeholder="請輸入密碼"></el-input>
</el-form-item>
<el-form-item align="center">
<el-button type="primary" @click="handleSubmit">登入</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "Validator",
methods:{
handleSubmit(){
//發起登入請求前,再次進行表單校驗
//先獲取表單物件,然后執行校驗方法
//ref具有id的效果，所以我們可以使用$refs
this.$refs["form"].validate(valid=>{
//valid為校驗后的結果，值為true校驗通過，false校驗失敗
if(valid){
alert("校驗通過，可以發起請求")
}else {
alert("校驗失敗，不可以發起請求")
}
})
}
},
data(){
return{
user:{
username:'',
password:''
},
formRules:{
username: [
{required:true,message:"用戶名不能為空",trigger:"blur"},
{min:3,max:5,message: "用戶名長度在3~5個字符間",trigger: "blur"}
],
password: [
{required:true,message:"密碼不能為空",trigger:'blur'}
]
}
}
},
}
</script>
<style scoped>
</style>
17、自定義校驗規則
回傳目錄
<template>
<div>
<el-form ref="form" :model="user" label-width="180px" label-position="top" size="mini" :rules="formRules">
<el-form-item label="用戶名" prop="username">
<el-input v-model="user.username" placeholder="請輸入用戶名"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="user.password" placeholder="請輸入密碼"></el-input>
</el-form-item>
<el-form-item label="確認密碼" prop="password2">
<el-input v-model="user.password2" placeholder="請確認密碼"></el-input>
</el-form-item>
<el-form-item align="center">
<el-button type="primary" @click="handleSubmit">登入</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Validator",
methods:{
handleSubmit(){
//發起登入請求前,再次進行表單校驗
//先獲取表單物件,然后執行校驗方法
//ref具有id的效果，所以我們可以使用$refs
this.$refs["form"].validate(valid=>{
//valid為校驗后的結果，值為true校驗通過，false校驗失敗
if(valid){
alert("校驗通過，可以發起請求")
}else {
alert("校驗失敗，不可以發起請求")
}
})
}
},
data(){
let checkPwd2 = (rule,value,callback)=>{
if(value.trim().length === 0){
callback(new Error("確認密碼不能為空"));
}else if(value !== this.user.password){
callback(new Error("兩次輸入密碼不一致!"))
}else {
callback();
}
}
return {
user:{
username:'',
password:'',
password2:''
},
formRules:{
username: [
{required:true,message:"用戶名不能為空",trigger:"blur"},
{min:3,max:5,message: "用戶名長度在3~5個字符間",trigger: "blur"}
],
password: [
{required:true,message:"密碼不能為空",trigger:'blur'}
],
password2: [
{validator:checkPwd2,trigger:"blur"}
]
}
}
},
}
</script>
<style scoped>
</style>
18、表單校驗綜合案例
回傳目錄
19、Table表格
回傳目錄
20、Pagination分頁
回傳目錄
21、Dialog對話框
回傳目錄
22、實戰一、環境準備
回傳目錄
23、實戰二、分頁查詢
回傳目錄
24、實戰三、添加
回傳目錄
25、實戰四、洗掉功能
回傳目錄
26、實戰五、更新功能
回傳目錄
27、Card卡片
回傳目錄
28、Breadcrumb面包屑
回傳目錄
29、Steps進度條
回傳目錄
30、導航選單的基本使用
回傳目錄
31、導航選單的折疊
回傳目錄
32、導航選單的select事件
回傳目錄
33、導航的路由模式
回傳目錄
34、組合應用
回傳目錄
35、Avatar頭像
回傳目錄
36、Dropdown下拉選單
回傳目錄
37、Alert警告
回傳目錄
38、頁頭
回傳目錄
39、Loading加載
回傳目錄
40、Message訊息提示
回傳目錄
41、MessageBox彈窗
回傳目錄
42、Tabs標簽頁
回傳目錄
43、Tree樹型控制元件的基本使用
回傳目錄
44、Tree樹型控制元件的可選擇
回傳目錄
45、Tree樹型控制元件-從服務器獲取資料
回傳目錄
46、Tree樹型控制元件-自定義節點內容
回傳目錄
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/321272.html
標籤：其他