一.目標(biāo)
實現(xiàn)下面這個頁面，表格中的數(shù)據(jù)使用axois異步加載數(shù)據(jù)
二.實現(xiàn)步驟?
首先在vue項目的views文件夾中新建一個tlias文件夾，用來存儲該案例的相關(guān)組件。員工頁面組件（EmpView.vue）和部門頁面組件（DeptView.vue）分別在tlias文件夾中創(chuàng)建好。
在App.vue中的<template>標(biāo)簽中引入<emp-view>標(biāo)簽，并在<script>標(biāo)簽中導(dǎo)入EmpView.vue組件。?components中加入EmpView組件。
<!-- 模板部分，由他生成HTML代碼 相當(dāng)于vue當(dāng)中的視圖部分 -->
<template><div> <!-- div是根標(biāo)簽，一個<template>標(biāo)簽中只能有一個根標(biāo)簽，也即只能有一個<template>標(biāo)簽 --><!-- <h1>{{ message }}</h1> --><!-- <element-view></element-view> --><emp-view></emp-view><!-- <router-view></router-view> --></div>
</template><!-- JS代碼，定義vue當(dāng)中的數(shù)據(jù)模型以及當(dāng)中的方法 -->
<script>
/*
import ElementView from './views/element/ElementView.vue' 將ElementView.vue組件文件導(dǎo)入并重新命名為ElementView 注意：<template>標(biāo)簽里面沒有定義標(biāo)簽，那么import的話會報錯
*/import EmpView from './views/tlias/EmpView.vue'export default {components: { EmpView }, // components里面也不能有<template>中未定義的標(biāo)簽的vue組件data () {return {/* message:"Hello Vue" */}},methods: {}}
</script><!-- 定義CSS樣式 -->
<style></style>
1.頁面基本布局
? ? ? ? 首先頁面呈現(xiàn)出頂欄，左邊欄，然后主區(qū)域的整體布局，因此要實現(xiàn)這種布局。我們在element組件中找到這一布局。
?然后找到對應(yīng)的代碼復(fù)制到員工頁面組件的<template>標(biāo)簽中。
<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container>
</el-container>
瀏覽器頁面結(jié)構(gòu)如下：?
?
在實現(xiàn)了基本布局后，發(fā)現(xiàn)這三部分并沒有邊框線，因此要在這三部分中加上邊框線。
?第一行代碼改下：
<el-container style="height: 800px; border: 1px solid #eee">
下面在<el-header>標(biāo)簽中設(shè)置要展示的標(biāo)題。
<el-header style="font-size: 40px; background-color: #6495ED;">tlias智能學(xué)習(xí)輔助系統(tǒng)</el-header>
header部分設(shè)計好后，接下來在<el-aside>標(biāo)簽中設(shè)置我們需要的樣式?。首先在element組件庫中尋找符合我們要求的樣式。
<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>導(dǎo)航一</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>導(dǎo)航二</template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="2-1">選項1</el-menu-item><el-menu-item index="2-2">選項2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="2-3">選項3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">選項4</template><el-menu-item index="2-4-1">選項4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>導(dǎo)航三</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-aside width="220px" style="background-color: rgb(238, 241, 246); border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統(tǒng)信息管理</template><el-menu-item-group><el-menu-item index="1-1"><router-link to="/dept">部門管理</router-link> </el-menu-item><el-menu-item index="1-2"><router-link to="/emp">員工管理</router-link> </el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside>
header和aside設(shè)計好后，下面主要設(shè)計main部分。
2.頁面組件實現(xiàn)
在main區(qū)域中首先分為以下幾個部分：
最上面是表單，中間是表格，下面是分頁欄。 因此需要這三部分的組件來實現(xiàn)。
首先是表單，表單采用的是行內(nèi)表單。
<el-form :inline="true" :model="searchEmp" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchEmp.name" placeholder="請輸入員工姓名"></el-input></el-form-item><el-form-item label="性別"><el-select v-model="searchEmp.gender" placeholder="請選擇"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入職時間"><!-- 日期選擇器 --><el-date-picker v-model="searchEmp.entryDate" type="daterange" range-separator="至"start-placeholder="開始日期" end-placeholder="結(jié)束日期"><!-- 綁定在searchEmp對象中的entryDate屬性中去，entryDate屬性是一個數(shù)組，有開始日期和結(jié)束日期 --></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form>
在表單中我們通過v-bind綁定了一個數(shù)據(jù)模型，是一個對象模型，命名為searchEmp，用來記住查詢到的對象。所有的表單項都綁定在searchEmp這個對象當(dāng)中。通過v-model實現(xiàn)searchEmp對象的name屬性，gender屬性和entryDate屬性的雙向綁定。
通過@click綁定一個事件onSubmit，當(dāng)點擊查詢時會將數(shù)據(jù)提交，觸發(fā)onSubmit方法。
methods: {onsubmit:function() {alert("開始查詢數(shù)據(jù)~")},handleSizeChange:function(val) {alert("當(dāng)前頁面條數(shù)為:" + val)},handleCurrentChange:function(val) {alert("當(dāng)前頁為：" + val)}}
對象searchEmp要在vue對象中定義，其中的entryDate屬性要定義一個日期選擇器，包含開始日期和結(jié)束日期。entryDate屬性是一個數(shù)組。
data () {return {searchEmp: {name:"",gender:"",entryDate:[]},tableData:[]}}
接著是表格
<!-- 表格 --><el-table :data="tableData" :border="true"> <!-- tableData數(shù)據(jù)模型是一個數(shù)組，需要在Vue對象的數(shù)據(jù)模型中定義 --><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column label="圖像" width="140"><!-- 圖像要指定一個scope插槽 --><template slot-scope="scope"><img :src="scope.row.image" width="50px"> <!-- 這個插槽展示圖片，為src屬性通過v-bind動態(tài)綁定一個值，即當(dāng)前列中的每一行的image屬性 --></template></el-table-column><el-table-column label="性別" width="140"><!-- 性別要指定一個scope插槽，通過scope插槽可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù) --><template slot-scope="scope">{{ scope.row.gender==1?'男':'女' }} <!-- 獲取當(dāng)前列中每一行的gender屬性并判斷是否==1，是為男，不是為女 --></template></el-table-column><el-table-column prop="job" label="職位" width="140"></el-table-column><el-table-column prop="entrydate" label="入職日期" width="200"></el-table-column><el-table-column prop="updatedate" label="最后操作時間" width="200"></el-table-column><el-table-column label="操作" width="200"><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button></el-table-column> <!-- prop要與JSON數(shù)據(jù)中的屬性名保持一致 --></el-table>
表格中通過v-bind綁定了一個屬性tableData，該屬性用于存儲表格中的數(shù)據(jù)。表格中的數(shù)據(jù)仍是以數(shù)組形式進(jìn)行存儲的，因此在數(shù)據(jù)模型中進(jìn)行聲明。（見上面代碼）
在表格的圖像和性別區(qū)，會展示出value值而并非內(nèi)容。為了解決這一問題，需要使用到插槽。
<el-table-column label="圖像" width="140"><!-- 圖像要指定一個scope插槽 --><template slot-scope="scope"><img :src="scope.row.image" width="50px"> <!-- 這個插槽展示圖片，為src屬性通過v-bind動態(tài)綁定一個值，即當(dāng)前列中的每一行的image屬性 --></template></el-table-column><el-table-column label="性別" width="140"><!-- 性別要指定一個scope插槽，通過scope插槽可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù) --><template slot-scope="scope">{{ scope.row.gender==1?'男':'女' }} <!-- 獲取當(dāng)前列中每一行的gender屬性并判斷是否==1，是為男，不是為女 --></template></el-table-column>
在圖像中動態(tài)綁定src屬性，使得圖像這一列的每一行數(shù)據(jù)中的image屬性動態(tài)綁定給src。
在性別中對這一列的每一行數(shù)據(jù)中的gender屬性做判斷，如果==1則性別為男，否則為女，使用三元運(yùn)算符。
scope.row.image
scope.row.gender
3.分頁組件實現(xiàn)
<el-pagination background layout="sizes, prev, pager, next, jumper"@size-change="handleSizeChange" @current-change="handleCurrentChange" :total="1000"><!-- :total="1000", 寫全 v-bind:total="1000", ":"語法是 v-bind: 的簡寫，用于綁定一個動態(tài)的值到屬性 --><!-- size-change pageSize 改變時會觸發(fā) 回調(diào)參數(shù)：每頁條數(shù) --><!-- current-change currentPage 改變時會觸發(fā) 回調(diào)參數(shù)：當(dāng)前頁 --><!-- @:v-on的簡寫 v-on為el-button標(biāo)簽綁定了一個事件click--></el-pagination>
分頁組件中有兩個方法，詳見Element-03.組件-Pagination分頁-CSDN博客。同時所定義的方法要在vue對象中加以聲明。
methods: {onsubmit:function() {alert("開始查詢數(shù)據(jù)~")},handleSizeChange:function(val) {alert("當(dāng)前頁面條數(shù)為:" + val)},handleCurrentChange:function(val) {alert("當(dāng)前頁為：" + val)}}
?三.axios異步加載數(shù)據(jù)
使用axios異步加載數(shù)據(jù)，達(dá)到在頁面中能夠動態(tài)展示的效果。在mounted方法中當(dāng)模型掛載完畢后，通過get方法拿到數(shù)據(jù)并將其中的data數(shù)組賦值給vue對象的tableData數(shù)組。
mounted () {axios.get("https://yapi.pro/mock/401965/user/getById").then((result) => {this.tableData=result.data.data });}
在<script>標(biāo)簽中引入axios?
<script>
import axios from 'axios';
相關(guān)具體原理參考Ajax-03.Axios-案例-CSDN博客
這樣整個案例便制作完成。
