Element

htmledit_views">

Element 是由饿了么前端团队开发的一个基于 Vue 2.0 的桌面端组件库，它提供了一系列高质量的Vue组件，帮助开发者快速构建功能丰富、风格统一的前端界面。官网：Element - The world's most popular Vue UI framework

引入

一、安装 ElementUI 组件库：

点击当前工程右键->在集成终端中打开
在命令行执行指令： npm i element-ui -S
检查工程目录->node_modules->element-ui 文件是否存在，如果存在则代表安装成功

二、引入 Element 组件库：

打开 srv->main.js 文件并修改

//修改后的main.js文件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false
//使用element组件
Vue.use(ElementUI);new Vue({el: "#app",router:router,render: h => h(App)
})

三、访问官网，复制组件代码并调整

我们一般不会直接修改 App.vue 页面，因此我们选择在 views 文件下新建文件夹，在该文件夹内创建 vue 页面并编写基本结构。

之前我们介绍过Vue的组件文件以.vue结尾，每个组件由三个部分组成<template>、<script>、<style>，因此文件基本结构为

html"><template><div></div>
</template><script>
export default {
}
</script><style></style>

然后前往 Element官网->组件，在想要复制的组件下点击显示代码，并将代码复制到div区域内。(如果复制的组件较复杂，还需注意是否有对应的方法，也需一并复制)。

因为打开的默认页面为App.vue页面，所以我们还需在App.vue页面的div区域引用新建的vue页面：

html">//新创建的vue文件————————————————————————
<template><div><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>
</template><script>
export default {
}
</script><style></style>
//App.vue文件————————————————————————————
<template><div id="app"><NewView></NewView></div>
</template>
<script>
import NewView from './views/Chen_View/NewView.vue';export default {components: { NewView }
}
</script>
<style></style>

常见组件

在Element官方界面有许多的组件，我们直接复制过来就可以使用

Table表格

Element提供了许多种类的表格，我们可以按需获取：

html"><template><div><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}
}
</script><style></style>

在官网页面的最下方，我们还可以找到相关属性的解释

看完Table组件，我们再来看一看经常与之搭配使用的 Pagination 分页组件

Pagination分页

当数据过多，同一个页面难以展示时，我们会使用分页组件分解数据，在其页面底部也会有相关属性的解释。

layout：组件布局，子组件名用逗号分隔
- sizes: 允许用户选择每页显示的条目数量的下拉选择器。
- prev: “上一页”按钮，允许用户跳转到上一页。
- pager: 页码列表，通常显示当前页附近的几个页码，允许用户直接跳转到这些页。
- next: “下一页”按钮，允许用户跳转到下一页。
- jumper: 允许用户输入页码，然后跳转到指定页的输入框。
- ->: 分隔符，对布局进行分组将组件的两侧对齐，左侧是页码操作，右侧是信息显示。
- total: 显示总记录数的文本，通常会显示为“共 x 条”。
- slot: 允许你在分页组件中插入自定义内容，比如额外的按钮或者信息。

html"><template><div><el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"//为组件的事件绑定方法@current-change="handleCurrentChange" :total="1000"></el-pagination></div>
</template><script>
export default {methods: {//对应方法也应一致handleSizeChange(val) {alert("每页变化" + val)},handleCurrentChange(val) {alert("页码发生变化" + val)}}
}
</script><style></style>

Dialog对话框

在保留当前页面的情况下，告知用户并承担相关的操作，

嵌套对话框示例：在一个 Dialog 内部嵌套另一个 Dialog

html"><template><div><el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button><el-dialog title="外层 Dialog" :visible.sync="outerVisible"><el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body></el-dialog><div slot="footer" class="dialog-footer"><el-button @click="outerVisible = false">取 消</el-button><el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button></div></el-dialog></div>
</template><script>
export default {data() {return {outerVisible: false,innerVisible: false};}
}
</script>

Form表单

将对话框和表单相结合，就可实现点击按钮时弹出表单填写框

html"><template><div><el-button type="text" @click="outerVisible = true">点击填写表单</el-button><el-dialog title="表单" :visible.sync="outerVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1"style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog></div>
</template><script>
export default {data() {return {form: {//定义表单相关数据name: '',region: '',date1: '',date2: '',},outerVisible: false//对话框默认为不可视};},methods: {onSubmit() {alert(JSON.stringify(this.form));//将for转为json并输出}}
}
</script>

实现案例

根据页面原型完成员工管理开发，并通过Axios完成数据异步加载。

我们可以依次完成该页面的组件，最后组合成我们想要的界面：

一、创建页面，完成页面的整体布局规划

前往Element找到合适的组件，CV再进行相应的修改

页面布局：

html"><template><div><el-container><el-header>学生信息表</el-header><el-container><el-aside width="200px">导航栏</el-aside><el-main>主区域</el-main></el-container></el-container></div>
</template><style>
.el-header {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #D3DCE6;height: 500px;color: #333;text-align: center;line-height: 160px;
}.el-main {height: 500px;background-color: #E9EEF3;color: #333;text-align: center;line-height: 40px;padding: 0 !important;
}
</style>

导航栏：

html"><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-submenu></el-menu>
</el-aside>

表单：

html"><el-main><el-table><!-- <el-table :data="data"> --><el-table-column prop="name" label="姓名" width="140"></el-table-column><el-table-column prop="age" label="年龄" width="120"></el-table-column><el-table-column prop="gender" label="性别" width="120"></el-table-column><el-table-column prop="studentID" label="学号" width="120"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table>
</el-main>

此时页面便已初具规模

二、布局中各个部分的组件实现

再对各个组件的细节部分进行实现：

html"><template><div><el-container><el-header>学生信息表</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-submenu></el-menu></el-aside><el-main><el-form :inline="true" :model="search" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="search.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="search.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><el-table :data="data"><el-table-column prop="name" label="姓名" width="140"></el-table-column><el-table-column prop="age" label="年龄" width="120"></el-table-column><el-table-column prop="gender" label="性别" width="120"></el-table-column><el-table-column prop="studentID" label="学号" width="120"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><el-pagination background layout="total, sizes, prev, pager, next,jumper"@size-change="handleSizeChange" @current-change="handleCurrentChange" :total="10"></el-pagination></el-main></el-container></el-container></div>
</template>
<script>
export default {data() {return {data: [],search: {name: "",gender: ""}}},methods: {//对应方法也应一致onSubmit() {console.log("查询数据");},handleSizeChange(val) {alert("每页变化" + val)},handleCurrentChange(val) {alert("页码发生变化" + val)}}
}
</script>
<style>
.el-header {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #D3DCE6;height: 500px;color: #333;text-align: center;line-height: 160px;
}.el-main {height: 500px;background-color: #E9EEF3;color: #333;text-align: left;line-height: 40px;
}
</style>

三、列表数据的异步加载，并渲染展示，这需要axios

vue中使用axios

想要实现渲染，需要使用axios发送请求，在vue中使用axios需要：

1、在项目目录下按照axios:npm install axios;

右键项目->在集成终端中打开->输入指令npm install axios，等待下载完成->重启项目

2、需要使用axios时，导入axios:import axios from 'axios';

在<script>顶部添加语句："import axios from 'axios';"，在钩子方法中通过axios发送异步请求。

html"><template><div><el-container><el-header>学生信息表</el-header><el-container><el-aside width="210px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>组织机构</template><el-menu-item index="1-1">学生表</el-menu-item><el-menu-item index="1-2">部门表</el-menu-item></el-submenu></el-menu></el-aside><el-main><el-form :inline="true" :model="search" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="search.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="search.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><el-table :data="data"><el-table-column prop="name" label="姓名" width="140"></el-table-column><el-table-column prop="age" label="年龄" width="120"></el-table-column><el-table-column prop="gender" label="性别" width="120"><template slot-scope="scope"><span v-if="scope.row.gender == 1">男</span><span v-else-if="scope.row.gender == 2">女</span><span v-else>武装直升机</span></template></el-table-column><el-table-column prop="studentID" label="学号" width="120"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><el-pagination background layout="total, sizes, prev, pager, next,jumper"@size-change="handleSizeChange" @current-change="handleCurrentChange" :total="10"></el-pagination></el-main></el-container></el-container></div>
</template>
<script>
import axios from 'axios';//引入axiosexport default {data() {return {data: [],search: {name: "",gender: ""}}},methods: {//对应方法也应一致onSubmit() {alert("查询数据");},handleSizeChange(val) {alert("每页变化" + val)},handleCurrentChange(val) {alert("页码发生变化" + val)}},mounted() {//在钩子方法中发起异步请求axios.get("https://yapi.pro/mock/557466/user/list").then((result) => {this.data = result.data.students;}).catch((err) => {alert(err);})}
}
</script>
<style>
.el-header {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;
}.el-aside {border: 1px solid #B3C0D1;height: 800px;text-align: center;line-height: 160px;
}.el-main {height: 800px;text-align: left;line-height: 40px;
}
</style>

此时已实现了大部分页面，但这离展示页面仍有一定差距：点击导航栏的学生表和部门表main部门切换成相应的页面。而这就需要使用vue路由

vue路由

前端路由是一种在单页面应用中，通过改变URL中的hash(#号)来更新视图(组件)而不重新加载整个页面的技术。

Vue Router

Vue Router是Vue的官方路由。它由三个部分组成：

<VueRouter>路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>请求导航链接的组件，允许用户在单页面应用中导航导航到不同的路径。浏览器会解析成<a>
<router-view>动态视图组件，用来渲染展示与路由路径相对应的组件。当路由切换时，它会更新显示的组件。

使用

一、首先要安装(如果在创建Vue时已选择则可忽略)

html">npm install vue-router@3.5.1

二、定义路由表

在router->index.js文件夹下定义，有两种方式

//方式一，先引入文件再使用
//略
import HomeView from '../views/HomeView.vue'//先引入文件Vue.use(VueRouter)const routes = [{path: '/Home',//定义访问路径name: 'home',component: HomeView//该路径对应的文件},{//略}]
//略
//方式二，直接指定路径并使用————————————————————————
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/student',name: 'student',component: () => import( '../views/Chen_View/NewView.vue')},{path: '/parts',name: 'parts',component: () => import( '../views/Chen_View/NewView2.vue')}
]const router = new VueRouter({routes
})export default router

三、使用router-link以实现点击不同区域访问不同组件的功能

html">//原
<el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>组织机构</template><el-menu-item index="1-1">学生表</el-menu-item><el-menu-item index="1-2">部门表</el-menu-item>
</el-submenu>
//新
<el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>组织机构</template><el-menu-item index="1-1"><router-link to="/student">学生表</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/parts">部门表</router-link></el-menu-item>
</el-submenu>

四、在App.vue文件下使用router-view实现动态的切换组件

html">//App.vue
<template><div id><router-view></router-view></div>
</template>
<script>export default {components: { }
}
</script>
<style></style>
//NewView------------------------------------
<template><div><el-container><el-header>学生信息表</el-header><el-container><el-aside width="210px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>组织机构</template><el-menu-item index="1-1"><router-link to="/student">学生表</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/parts">部门表</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main><el-form :inline="true" :model="search" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="search.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="search.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><el-table :data="data"><el-table-column prop="name" label="姓名" width="140"></el-table-column><el-table-column prop="age" label="年龄" width="120"></el-table-column><el-table-column prop="gender" label="性别" width="120"><template slot-scope="scope"><span v-if="scope.row.gender == 1">男</span><span v-else-if="scope.row.gender == 2">女</span><span v-else>武装直升机</span></template></el-table-column><el-table-column prop="studentID" label="学号" width="120"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><el-pagination background layout="total, sizes, prev, pager, next,jumper"@size-change="handleSizeChange" @current-change="handleCurrentChange" :total="10"></el-pagination></el-main></el-container></el-container></div>
</template>
<script>
import axios from 'axios';//引入axiosexport default {data() {return {data: [],search: {name: "",gender: ""}}},methods: {//对应方法也应一致onSubmit() {alert("查询数据");},handleSizeChange(val) {alert("每页变化" + val)},handleCurrentChange(val) {alert("页码发生变化" + val)}},mounted() {//在钩子方法中发起异步请求axios.get("https://yapi.pro/mock/557466/user/list").then((result) => {this.data = result.data.students;}).catch((err) => {alert(err);})}
}
</script>
<style>
.el-header {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;
}.el-aside {border: 1px solid #B3C0D1;height: 800px;text-align: center;line-height: 160px;
}.el-main {height: 800px;text-align: left;line-height: 40px;
}
</style>
//NewView2---------------------------------
<template><div><el-container><el-header>学生信息表</el-header><el-container><el-aside width="210px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>组织机构</template><el-menu-item index="1-1"><router-link to="/student">学生表</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/parts">部门表</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main><el-form :inline="true" :model="search" class="demo-form-inline"><el-form-item label="部门"><el-input v-model="search.name" placeholder="部门"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><el-table :data="data"><el-table-column prop="Name" label="部门" width="200"></el-table-column><el-table-column prop="head" label="领导" width="120"></el-table-column><el-table-column prop="staffCount" label="员工数" width="120"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><el-pagination background layout="total, sizes, prev, pager, next,jumper"@size-change="handleSizeChange" @current-change="handleCurrentChange" :total="10"></el-pagination></el-main></el-container></el-container></div>
</template>
<script>
import axios from 'axios';//引入axiosexport default {data() {return {data: [],search: {name: "",}}},methods: {//对应方法也应一致onSubmit() {alert("查询数据");},handleSizeChange(val) {alert("每页变化" + val)},handleCurrentChange(val) {alert("页码发生变化" + val)}},mounted() {//在钩子方法中发起异步请求axios.get("https://yapi.pro/mock/557466/user/list_1730312941237").then((result) => {this.data = result.data.Departments;}).catch((err) => {alert(err);})}
}
</script>
<style>
.el-header {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;
}.el-aside {border: 1px solid #B3C0D1;height: 800px;text-align: center;line-height: 160px;
}.el-main {height: 800px;text-align: left;line-height: 40px;
}
</style>

运行结果：

此时已大体完成想要的效果，但仍有些许不足：这两个页面分别为http://localhost:4399/#/student 和http://localhost:4399/#/parts，但在初次运行时访问的地址为http://localhost:4399/#/，此时网页为空白，这是因为我们在定义路由表时对默认路径进行了修改导致默认路径访问的文件为空，我们需要在index.js文件下对默认路径：/ 也赋予对应的组件

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/student',name: 'student',component: () => import( '../views/Chen_View/NewView.vue')},{path: '/parts',name: 'parts',component: () => import( '../views/Chen_View/NewView2.vue')},{path: '/',redirect:'/student',//表示重定向}
]const router = new VueRouter({routes
})export default router