1、Element簡介 Element是餓了麽公司前端開發團隊提供的一套基於Vue的網站組件庫，用於快速構建網頁 Element提供了很多組件（組成網頁的部件）供我們使用。 官方網站 https://element.eleme.cn/#/zh-CN 2、快速入門 2.1、將相關的element-ui ...
1、Element簡介
- Element是餓了麽公司前端開發團隊提供的一套基於Vue的網站組件庫，用於快速構建網頁
- Element提供了很多組件（組成網頁的部件）供我們使用。
- 官方網站
https://element.eleme.cn/#/zh-CN
2、快速入門
2.1、將相關的element-ui和js文件拷貝至個人項目的webapp下
2.2、創建頁面，併在頁面引入Element的css、js文件和Vue的js文件
-
<script src="vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
2.3、創建Vue核心對象
-
Element是基於Vue開發的，所以使用Element時必須要創建Vue對象
-
<script> new Vue({ el:"#id值" }) </script>
2.4、在官網中複製Element組件代碼
- 在左邊菜單欄找到
Button按鈕選項，然後找到自己喜歡的按鈕樣式，點擊顯示代碼，在下麵就會展示出對應的代碼，將這些代碼拷貝到我們自己的頁面即可
2.5、整體代碼如下
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <el-row> <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> <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> <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> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app" }) </script> </body> </html>
3、Element佈局
- Element提供了兩種佈局方式，分別是
- Layout佈局
- Container佈局容器
3.1、Layout佈局
-
通過基礎的24分欄，迅速簡便地創建佈局。也就是預設將一行分為24欄，根據頁面要求給每一列設置所占的欄數
- 在左邊菜單找到
layout佈局按鈕，然後找到自己喜歡的按鈕樣式，點擊顯示代碼，在下麵就會展示出對應的代碼，顯示出的代碼中又樣式，有html標簽。將樣式拷貝到個人頁面的head標簽內，將html標簽拷貝到<div id="app"></div>標簽內
-
整體頁面代碼如下
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-row { margin-bottom: 20px; } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style> </head> <body> <div id="app"> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <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> <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> <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> <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> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app" }) </script> </body> </html>
-
-
現在需要添加一行，要求該行顯示8個格子，通過計算每個各自占3欄，具體的html代碼如下所示
-
<!-- 添加一行，8個格子 24/8 = 3 --> <el-row> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> </el-row>
-
3.2、Container佈局容器
-
概念
- 用於佈局的容器組件，方便快速搭建頁面的基本結構，如下圖就是佈局容器效果
-
如下圖是官網提供的Container佈局容器實例
- 該效果代碼中包含了樣式、頁面標簽、模型數據。將裡面的樣式
<style>拷貝到個人頁面的head標簽中；將html標簽拷貝到<div id="app"></div>標簽中，再將數據模型拷貝到vue對象的data()中
-
整體頁面代碼如下
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> </head> <body> <div id="app"> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>導航一</template> <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-group title="分組2"> <el-menu-item index="1-3">選項3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">選項4</template> <el-menu-item index="1-4-1">選項4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>導航二</template> <el-submenu index="2-1"> <template slot="title">選項1</template> <el-menu-item index="2-1-1">選項1-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>導航三</template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="3-1">選項1</el-menu-item> <el-menu-item index="3-2">選項2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="3-3">選項3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">選項4</template> <el-menu-item index="3-4-1">選項4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>刪除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app", data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) } } }) </script> </body> </html>
-
4、綜合案例
- 需求
- 完成如下頁面效果
- 要完成該頁面，需要先對這個頁面進行分析，看頁面由哪幾個部分組成，然後到官網進行拷貝並修改，頁面總共有如下組成部分
- 還有一個是當點擊
新增按鈕的時候，會在頁面正中間彈出一個對話框，如下所示
- 完成如下頁面效果
4.1、準備基本頁面
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el: "#app" }) </script> </body> </html>
4.2、完成搜索表單展示
- 在Element光網找到橫排的表單效果，然後拷貝代碼併進行修改
- 點擊上面的
顯示代碼後，就會展示出對應的代碼，下麵是對這部分代碼進行分析的圖解 - 分析結束後就可以根據需求效果修改代碼
4.3、完成批量刪除和新增按鈕展示
- 從Element官網找到具有著色效果的按鈕，並將代碼拷貝到我們自己的頁面上
4.4、完成對話框的展示
- 在Element官網找到對話框的效果如下圖所示：
- 對代碼進行分析的圖解如下圖所示
- 上圖分析出來的模型數據需要在Vue對象中進行定義
- 表單代碼如下所示
4.5、完成表格界面展示
- 在左邊菜單欄找到
Table表格按鈕，找到需要的表格效果，並複製代碼，將html標簽拷貝到<div id="app"></div>中，如下所示 - 將相關css樣式拷貝到
head標簽中，如下所示 - 將方法和模型數據拷貝到Vue對象指定的位置
- 拷貝完成後通過瀏覽器打開可以看到表格的效果
- 雖然表格效果出來了，但是顯示的表頭和數據並不是我們想要的，所以還需要對頁面代碼進行修改
- 1.修改表頭和數據
- 下麵是對錶格代碼進行分析的圖解。根據下圖書名修改自己的列數和列名
- 修改完頁面後，還需要對綁定的模型數據進行修改，下圖是對模型數據進行分析的圖解
- 2.給表格添加操作列
- 從官網上找到有按鈕的表格，複製過來進行修改
- 3.給表格添加覆選框和標號列
- 預期效果如下
- 此效果也是從Element官網進行拷貝，找到對應的表格效果，然後將其對應代碼拷貝至個人代碼中，如下是覆選框列官網效果圖和代碼
- 這裡需要註意在
<el-table>標簽上有一個事件@selection-change="handleSelectionChange"，這裡綁定的函數也需要從官網拷貝到我們自己的頁面代碼中，函數代碼如下所示： - 從函數中又發現一個模型數據
multipleSelection，所以還需要定義出該模型數據。標號列也用同樣的方式進行拷貝並修改
- 預期效果如下
- 4.給表格處理禁用和啟用
- 1.修改表頭和數據
4.6、完成分頁條的展示
-
在Element官網找到
Pagination分頁，在頁面主體部分找到需要的效果，如下所示-
-
點擊
顯示代碼，找到完整功能對應的代碼，接下來對該代碼進行分析 -
上述代碼屬性說明
page-size：每頁顯示的條目數page-sizes：每頁顯示個數選擇器的選項設置:page-sizes="[100, 200, 300, 400]"對應的頁面效果如下：currentPage：當前頁碼。我們點擊哪個頁面，此屬性值就是幾total：總記錄數。用來設置總的數據目錄條數，該屬性設置後，Element會自動計算出需要分多少也給我們展示對應的代碼
-
事件說明
-
size-change：pageSize改變的時候會觸發。也就是當我們改變了每頁顯示的條目數後，該事件會觸發 -
current-change：currentPage改變的時候會觸發。也就是當我們點擊了其他的頁碼後，該事件會複發
-
-
4.7、完整案例代碼
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--elementui的css--> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <!--先導入vue的js--> <script src="js/vue.js"></script> <!--再導入element的js--> <script src="element-ui/lib/index.js"></script> <style> .el-table .warning-row { background: oldlace; } .el-table .success-row { background: #f0f9eb; } </style> </head> <body> <div id="app"> <!--搜索表單--> <el-form :inline="true" :model="brand" class="demo-form-inline"> <el-form-item label="當前狀態"> <el-select v-model="brand.status" placeholder="當前狀態"> <el-option label="啟用" value="1"></el-option> <el-option label="禁用" value="0"></el-option> </el-select> </el-form-item> <el-form-item label="企業名稱"> <el-input v-model="brand.companyName" placeholder="企業名稱"></el-input> </el-form-item> <el-form-item label="品牌名稱"> <el-input v-model="brand.brandName" placeholder="品牌名稱"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查詢</el-button> </el-form-item> </el-form> <!--倆按鈕--> <el-row> <el-button type="danger" plain>批量刪除</el-button> <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button> </el-row> <!--添加表單的對話框--> <el-dialog title="編輯品牌" :visible.sync="dialogFormVisible" width="30%"> <el-form ref="form" :model="brand" label-width="80px"> <el-form-item label="品牌名稱"> <el-input v-model="brand.brandName"></el-input> </el-form-item> <el-form-item label="企業名稱"> <el-input v-model="brand.companyName"></el-input> </el-form-item> <el-form-item label="排序"> <el-input v-model="brand.ordered"></el-input> </el-form-item> <el-form-item label="備註"> <el-input type="textarea" v-model="brand.desc"></el-input> </el-form-item> <el-form-item label="狀態"> <el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch> </el-form-item> <el-form-item> <el-button type="primary" @click="saveBrand">提交</el-button> <el-button @click="dialogFormVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> <!-- 表格 @selection-change:多選框發生選擇變化的時候觸發的事件 --> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="brandName" label="品牌名稱" align="center"> </el-table-column> <el-table-column prop="companyName" label="企業名稱" align="center"> </el-table-column> <el-table-column prop="ordered" label="排序" align="center"> </el-table-column> <el-table-column prop="status" label="當前狀態" align="center"> <!--獲取到status值,然後進行判斷--> <template slot-scope="scope"> <el-tag>{{scope.row.status=='1'?'啟用':'禁用'}}</el-tag> </template> </el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">編輯</el-button> <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button> </template> </el-table-column> </el-table> <!-- 分頁條: @size-change:每頁條數變化的時候 @current-change:頁碼變化的時候 :current-page:展示的頁碼 :page-sizes:每頁顯示的條數可選列表 :page-size:每頁顯示的條數 :total:總條數 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </div> </body> <script> new Vue({ el:"#app", data() { return { brand: { status: '', companyName: '', brandName: '' }, dialogFormVisible: false, tableData: [{ brandName: '紅米', companyName: '小米科技', ordered: '1', status:'0' },{ brandName: '紅米', companyName: '小米科技', ordered: '1', status:'1' },{ brandName: '紅米', companyName: '小米科技', ordered: '1', status:'0' },{ brandName: '紅米', companyName: '小米科技', ordered: '1', status:'1' },{ brandName: '紅米', companyName: '小米科技', ordered: '1', status:'0' },{ brandName: '紅米', companyName: '小米科技', ordered: '1', status:'0' }], currentPage: 2 } }, methods: { onSubmit() { console.log(this.brand); }, saveBrand() { console.log(this.brand); }, //切換表格行的樣式 tableRowClassName({row, rowIndex}) { if (rowIndex%2 === 0) { return 'success-row'; } return ''; }, //處理選擇框變化的事件方法 handleSelectionChange(val) { console.log(val); this.multipleSelection = val; }, //處理編輯操作 handleEdit(index, row) { console.log(index, row); }, //處理刪除操作 handleDelete(index, row) { console.log(index, row); }, //獲取每條顯示的條數 handleSizeChange(val) { console.log(`每頁 ${val} 條`); }, //獲取當前頁碼 handleCurrentChange(val) { console.log(`當前頁: ${val}`); } } }); </script> </html>
