Element-ui 使用详细介绍
一.后台搭建
使用 vue-admin-template 来快速搭建后台管理,它包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
Element是（饿了么团队）基于MVVM框架Vue开源出来的一套前端ui组件。官网： element-ui
1.快速搭建
若用vue官网提供的脚手架需要写跟多代码，比如登录界面、主界面菜单等。可以使用 vue-admin-template ，在此基础上开发，而且github上配有详细的模板说明，这样可以节省开发时间。
- 下载vue-admin-template(vue 2.0)进行解压
- 在命令提示符切换到该目录，输入命令安装所有依赖：
cnpm install
- 运行
npm run dev
2.工程结构
| 目录名称 | 存储内容 |
|---|---|
| build | 构建工程相关脚本 |
| config | 配置相关 |
| src | 工程源码 |
| static | 静态资源 |
| src/api | 访问后端API |
| src/utils | 工具类 |
| src/views | 路由组件 |
| src/router | 路由 |
3.项目初始化
关闭语法规范性检查
修改config/index.js : useEslint = false国际化设置
修改main.js :
import locale from 'element‐ui/lib/locale/lang/en' --> import locale from 'elemen‐ui/lib/locale/lang/zh‐CN'与easy-mock对接
修改config下dev.env.js中BASE_API为easy-mock的Base URL，easy-mock最好部署到服务器上BASE_API: '"http://192.168.91.136:7300/mock/5af314a4c612520d0d7650c7"',
easy-mock添加登录认证模拟数据
地址： /user/login
提交方式：post
内容：{
"code": 20000,
"data": {
"token": "admin"
}
}
添加返回用户信息url模拟数据
地址：/user/info
提交方式：get
内容：{
"code": 20000,
"data": {
"roles": ["admin"],
"role": ["admin"],
"name": "admin",
"avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
}
}
4.更改标题与菜单
修改index.html的标题为“后台管理系统”，修改后浏览器自动刷新。
修改src/router下的index.js中constantRouterMap的内容
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
}, {
path: '/404',
component: () => import('@/views/404'),
hidden: true
}, {
path: '/',
component: Layout,
// redirect: '/dashboard',
redirect: '/hostmanager/server', //登录后重定向到服务器信息页面
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
}, {
path: '/hostmanager',
component: Layout,
redirect: '/hostmanager/list',
name: 'hostmanager',
meta: { title: '主机管理', icon: 'example' },
children: [
{
path: 'server',
name: 'Server',
component: () => import('@/views/server/index'),
meta: { title: '服务器信息', icon: 'form' }
},
{
path: 'list',
name: 'List',
component: () => import('@/views/list/index'),
meta: { title: '主机列表', icon: 'table' }
},
{
path: 'task',
name: 'Task',
component: () => import('@/views/task/index'),
meta: { title: '任务控制', icon: 'tree' }
}
]
}, {
path: '/testqueue',
component: Layout,
children: [
{
path: 'index',
name: 'testQueue',
component: () => import('@/views/queue/index'),
meta: { title: '测试队列', icon: 'form' }
}
]
},
{
path: '/taskmanager',
component: Layout,
meta: { title: '任务管理', icon: 'example' },
children: [
{
path: 'list',
name: 'taskList',
component: () => import('@/views/taskList/index'),
meta: { title: '任务列表', icon: 'form' }
},
{
path: 'detail',
name: 'taskDetail',
component: () => import('@/views/taskDetail/index'),
meta: { title: '任务清单', icon: 'form' }
},
{
path: 'create',
name: 'taskCreate',
component: () => import('@/views/taskCreate/index'),
meta: { title: '新建任务', icon: 'form' }
},
]
}, // 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
二.element-ui使用
1.表格组件
<el-table :data="list" border style="width: 100%;">
<el-table-column prop="id" label="活动ID" min-width="1"></el-table-column>
<el-table-column prop="name" label="活动名称" min-width="1"></el-table-column>
<el-table-column prop="address" label="活动地址" min-width="1"></el-table-column>
<el-table-column prop="starttime" label="开始日期" min-width="1"></el-table-column>
<el-table-column label="操作" min-width="1">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
<el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<script>
import gatheringApi from '@/api/gathering'
export default {
data(){
return {
list:[]
}
},
created(){
this.fetchData();
},
methods:{
fetchData(){
gatheringApi.getList().then(response => {
this.list=response.data
});
}
}
}
</script>
当没有使用template模板页时，一般加上prop属性，若有template时，可以为：
<el-table-column label="主机名" min-width="2">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="操作" min-width="3">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="findTask(scope.$index,scope.row)">查看</el-button>
<el-button type="info" size="small" :disabled="scope.row.status !== '空闲'" @click="createTask(scope.$index,scope.row)">新建</el-button>
</template>
</el-table-column>
slot-scope用于指定当前行的上下文。使用scope.row可以获取行对象。
table组件的属性：
| 参数 | 说明 | 类型 |
|---|---|---|
| data | 显示的数据 | array |
table-column组件的属性：
| 参数 | 说明 | 类型 |
|---|---|---|
| label | 显示的标题 | string |
| prop | 对应列内容的字段名 | string |
| width | 对应列的宽度 | number |
| min-width | 按比例显示宽度 | number |
官方文档：table组件
2.分页组件
<el‐table :data="list" border style="width: 100%"></el-table>
<el-pagination
@size-change="fetchDate"
@current-change="fetchDate"
:current-page="currentPage"
:page-sizes="[10,20,30,50]"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper, ->, total, slot"
:total="total">
</el-pagination>
<script>
import gatheringApi from '@/api/gathering'
export default {
data(){
return {
list:[],
total:0,//总记录数
currentPage:1,//当前页
pageSize:10,//每页大小
searchMap: {}//查询表单绑定变量
}
},
created(){
this.fetchData();
},
methods:{
fetchData(){
gatheringApi.search(this.currentPage,this.pageSize,this.searchMap).then(response =>{
this.list=response.data.rows
this.total=response.data.total
});
}
}
}
</script>
上面的分页方式是数据量比较大是传currentPage, pageSize给后端，由后端来实现分页；
数据量比较小时由前端实现分页，如下：
<el-table border :data="list.slice((currentPage-1)*pageSize, currentPage*pageSize)" style="width: 100%;margin-top: 20px;"></el-table>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper, ->, total"
:total="list.length">
</el-pagination>
<script>
export default {
data() {
return {
list: [],
currentPage: 1,
pageSize: 10,
}
},
methods: {
// 分页相关函数
handleSizeChange(val){
console.log(`每页${val}条`)
this.pageSize = val
},
handleCurrentChange(val){
console.log(`当前页：${val}`)
this.currentPage = val
},
}
}
</script>
pagination的常用属性：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| page-size | 每页显示条目个数 | number | - | 10 |
| total | 总条目数 | number | - | - |
| current-page | 当前页数，支持.sync修饰符 | number | - | 1 |
| layout | 组件布局 | string | sizes,prev,pager,next,jumper,->,total,slot | prev,pager,next,jumper, ->, total |
| pages-sizes | 每页显示个数选择器的选项设置 | number[] | - | [10,20,30,40,50,100] |
pagination的常用事件：
| 事件名称 | 说明 | 回调参数· |
|---|---|---|
| size-changer | pageSize改变时会触发 | 每页条数 |
| current-change | currentPage改变时会触发 | 当前页 |
官网链接：pagination组件
3.表单组件
在分页列表的基础上实现条件查询功能
<!-- 行内表单：用于查询条件 -->
<el-form :inline="true">
<el-form-item label="活动名称">
<el-input v-model="searchMap.name" placeholder="活动名称"></el-input>
</el-form-item>
<el-form-item label="活动日期">
<el-date-picker
type="date"
v-model="searchMap.startdate"
placeholder="选择开始日期"
></el-date-picker>
<el-date-picker
type="date"
v-model="searchMap.enddate"
placeholder="选择结束日期"
></el-date-picker>
</el-form-item>
<el-button type="primary" @click="fetchDate">查询</el-button>
<el-button type="primary" @click="handleEdit('')">新增</el-button>
</el-form>
<!-- 对话框表单 -->
<el-dialog title="活动编辑" :visible.sync="addDialogVisible">
<el-form label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="pojo.name" placeholder="活动名称"></el-input>
</el-form-item>
<el-form-item label="开始日期">
<el-date-picker type="date" v-model="pojo.starttime" placeholder="开始日期"></el-date-picker>
</el-form-item>
<el-form-item label="活动详情">
<el-input type="textarea" v-model="pojo.detail" :rows="2" placeholder="活动详情"></el-input>
</el-form-item>
<el-form-item label="是否可见">
<el-switch v-model="pojo.state" active-color="#13ce66" inactive-color="#ff4949"
active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handerSave">保存</el-button>
<el-button @click="addDialogVisible=false">关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
form（表单）组件官方文档：form组件
input（文本框）组件官方文档：input组件
date-picker（日期框）组件官方文档：DatePicker组件
switch（开关）组件官方文档：switch组件
注意：input组件中多行文本框设置
4.对话框组件
<el-dialog title="新建任务" :visible.sync="addDialogVisible" width="37%">
</el-dialog>
<script>
data(){
......
addDialogVisible: false // 对话框是否显示
}
</script>
属性title为对话框标题，visible为是否显示。变量addDialogVisible用于控制对话框的显示，点击按钮将dialogFormVisible = true即可打开对话框。
dialog（对话框）组件官方文档：dialog组件
5.下拉选组件
<el‐form‐item label="城市">
<el‐select v‐model="pojo.city" placeholder="请选择">
<el‐option
v‐for="item in cityList"
:key="item.id"
:label="item.name"
:value="item.id">
</el‐option>
</el‐select>
</el‐form‐item>
<script>
import cityApi from '@/api/city'
export default {
data(){
return {
cityList: []
}
},
created() {
cityApi.getList().then(response =>{
this.cityList = response.data
})
}
}
</script>
select（下拉选）组件官方文档：select组件
6.消息提示组件
this.$message({
message: response.message,
type: (response.flag?'success':'error')
});
// 或者
this.$message.success('请求成功！');
message（消息提示）组件官方文档：message组件
7.关于尺寸介绍
默认尺寸是最大的，其次中等、小、超小
button按钮
size：medium / small / mini
input输入框
size：medium / small / mini
select选择器
size：medium / small / mini
form表单
label-width：表单域标签的宽度
size：medium / small / mini （用于控制该表单域下组件的尺寸）
table表格
size：medium / small / mini
三.vue中使用element-ui示例
对活动管理的查询、分页、条件查询，增加，修改，删除等。采用的easy-mock的模拟接口。
gathering.vue
<template>
<div>
<br/>
<el-form :inline="true">
<el-form-item label="活动名称">
<el-input v-model="searchMap.name" placeholder="活动名称"></el-input>
</el-form-item>
<el-form-item label="活动日期">
<el-date-picker
type="date"
v-model="searchMap.startdate"
placeholder="选择开始日期"
></el-date-picker>
<el-date-picker
type="date"
v-model="searchMap.enddate"
placeholder="选择结束日期"
></el-date-picker>
</el-form-item>
<el-button type="primary" @click="fetchDate">查询</el-button>
<el-button type="primary" @click="handleEdit('')">新增</el-button>
</el-form>
<el-table :data="list" border style="width: 100%;">
<el-table-column prop="id" label="活动ID" min-width="1"></el-table-column>
<el-table-column prop="name" label="活动名称" min-width="1"></el-table-column>
<el-table-column prop="address" label="活动地址" min-width="1"></el-table-column>
<el-table-column prop="starttime" label="开始日期" min-width="1"></el-table-column>
<el-table-column label="操作" min-width="1">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
<el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="fetchDate"
@current-change="fetchDate"
:current-page="currentPage"
:page-sizes="[10,20,30,50]"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper, ->, total, slot"
:total="total">
</el-pagination>
<el-dialog title="活动编辑" :visible.sync="addDialogVisible">
<el-form label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="pojo.name" placeholder="活动名称"></el-input>
</el-form-item>
<el-form-item label="开始日期">
<el-date-picker type="date" v-model="pojo.starttime" placeholder="开始日期"></el-date-picker>
</el-form-item>
<el-form-item label="活动详情">
<el-input type="textarea" v-model="pojo.detail" :rows="2" placeholder="活动详情"></el-input>
</el-form-item>
<el-form-item label="选择城市">
<el-select v-model="pojo.city" placeholder="请选择">
<el-option
v-for="item in cityList"
:key="item.id"
:value="item.id"
:label="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否可见">
<el-switch v-model="pojo.state" active-color="#13ce66" inactive-color="#ff4949"
active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handerSave">保存</el-button>
<el-button @click="addDialogVisible=false">关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import gatheringApi from '@/api/gathering'
import cityApi from '@/api/city'
export default {
data(){
return {
list: [], // 当前活动列表
// 分页初始化
currentPage: 1, // 当前页
pageSize: 20, // 每页条数,默认是10
searchMap: {}, //查询条件
total: 0, // 总条数
// 对话框
addDialogVisible: false,
pojo: {}, // 对话框表单数据对象
// 城市下拉选列表
cityList: [], //城市列表
id: '', // 当前编辑的id
}
},
created() {
this.fetchDate();
cityApi.getList().then(res => {
this.cityList = res.data;
console.log(res.data)
})
},
methods: {
// 分页根据条件获取列表数据
fetchDate(){
gatheringApi.search(this.currentPage, this.pageSize, this.searchMap).then(res => {
this.list = res.data.rows; // 当前页面列表
this.total = res.data.total; // 总条数
console.log(res.data.rows)
}).catch(err => {
alert('请求失败!')
})
},
// 新增或修改
handleEdit(id){
this.id = id; // 标准是新增还是修改
this.addDialogVisible = true; // 打开窗口
if (id){ // 修改
// 调用查询
gatheringApi.findById(id).then(response => {
this.pojo = response.data;
})
} else { // 新增
this.pojo = {} // 清空表单
}
},
// 保存
handerSave(){
gatheringApi.updateById(this.id,this.pojo).then(res => {
this.$message({
message: res.message,
type: (res.flag? 'success':'error'),
});
if (res.flag){ //添加成功
this.fetchDate();
}
});
this.addDialogVisible = false; //关闭对话框
},
handleDelete(id){
this.$confirm('确定要删除此条记录吗','提示',{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
gatheringApi.deleteById(id).then(res => {
this.$message({
message: res.message,
type: (res.flag? 'success':'error')
});
if (res.flag){
this.fetchDate(); // 刷新数据
}
});
}).catch(() => {});
}
},
}
</script>
<style>
</style>
gathering.js
import request from '@/utils/request'
const group_name = 'gathering'
const api_name = 'gathering'
export default {
getList() { // 获取所有
return request(
{
url: `/${group_name}/${api_name}`,
method: 'get'
}
);
},
search(page, size, searchMap){ // 分页
return request(
{
url: `/${group_name}/${api_name}/search/${page}/${size}`,
method: 'post',
data: searchMap
}
);
},
save(pojo){ // 新增对话框保存
return request(
{
url: `/${group_name}/${api_name}`,
method: 'post',
data: pojo
}
)
},
findById(id){ // 根据id查询
return request({
url: `/${group_name}/${api_name}/${id}`,
method: 'get'
});
},
updateById(id,pojo){
if (id == null || id == ''){
return this.save();
};
return request({
url: `/${group_name}/${api_name}/${id}`,
method: 'put',
data: pojo
});
},
deleteById(id){
return request({
url: `/${group_name}/${api_name}/${id}`,
method: 'delete'
});
}
}
city.js
import request from "@/utils/request"
export default {
getList(){
return request(
{
url:'/base/city',
method:'get'
}
);
}
}
Element-ui 使用详细介绍的更多相关文章
- Element Ui使用技巧——Form表单的校验规则rules详细说明
Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...
- 【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例
JSF提供了大量的UI标签来简化创建视图.这些UI标签类似于ASP.NET中的服务器组件.使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到 ...
- Element ui结合springboot的简单实战
Eelment UI简单实战 前端开发 1 创建项目,导入element ui(略) 2 大致设计出想要的效果,如下 3 创建包 根据设计的大致模样在项目的components中创建对应的包,方便以后 ...
- Java 集合系列05之 LinkedList详细介绍(源码解析)和使用示例
概要 前面,我们已经学习了ArrayList,并了解了fail-fast机制.这一章我们接着学习List的实现类——LinkedList.和学习ArrayList一样,接下来呢,我们先对Linked ...
- Java 集合系列12之 TreeMap详细介绍(源码解析)和使用示例
概要 这一章,我们对TreeMap进行学习.我们先对TreeMap有个整体认识,然后再学习它的源码,最后再通过实例来学会使用TreeMap.内容包括:第1部分 TreeMap介绍第2部分 TreeMa ...
- Android manifest之manifest标签详细介绍
AndroidManifest详细介绍 本文主要对AndroidManifest.xml文件中各个标签进行说明.索引如下: 概要PART--01 manifest标签PART--02 安全机制和per ...
- ［转]详细介绍java中的数据结构
详细介绍java中的数据结构 本文介绍的是java中的数据结构,本文试图通过简单的描述,向读者阐述各个类的作用以及如何正确使用这些类.一起来看本文吧! 也许你已经熟练使用了java.util包里面的各 ...
- 详细介绍java中的数据结构
详细介绍java中的数据结构 http://developer.51cto.com/art/201107/273003.htm 本文介绍的是java中的数据结构,本文试图通过简单的描述,向读者阐述各个 ...
- Java 集合系列 09 HashMap详细介绍(源码解析)和使用示例
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
随机推荐
- 【NOIP2017模拟12.3】子串
题目 分析 对于当前枚举串 \(now\),从前往后扫.若扫到 \(i\),\(s_i\) 是 ; \(s_j\) 的子串 \((i < j < now)\),我们就可以跳过不匹配 \(i ...
- docker-compose命令及yaml文件
Docker-compose常用命令 docker-compose up -d nginx 构建建启动nignx容器 docker-compose exec nginx bash 登录到nginx容器 ...
- 用Java 实现断点续传 (HTTP)
在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...
- 序列式容器————list
list是一个线性双向链表结构,它的数据由若干个节点构成,每一个节点都包括一个信息块(即实际存储的数据).一个前驱指针和一个后驱指针. 它无需分配指定的内存大小且可以任意伸缩,这是因为它存储在非连续的 ...
- 论文阅读：Stateless Network Functions: Breaking the Tight Coupling of State and Processing
摘要: 无状态网络功能是一个新的网络功能虚拟化架构,解耦了现有的网络功能设计到无状态处理组件以及数据存储层,在打破紧密耦合的同时,实现了更具可伸缩性和可恢复性的网络功能基础设施.无状态NF处理实例是围 ...
- 【canvas学习笔记七】混合和裁剪
globalCompositeOperation 如果我们先画了一个图形,然后要在这个图形上面再画一个图形,那么这个图形会怎么样呢?是覆盖在原来的图形上面吗?这时候,就要用到globalComposi ...
- java语言课堂动手动脑
1 运行 TestInherits.java 示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改Parent构造方法的代码,显式调用GrandParent的另一个构造函数,注意这句调用代码是 ...
- Shell 变量/echo命令
Shell 教程 Shell 是一个用C语言编写的程序,它是用户使用Linux的桥梁.Shell既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个界面,用户 ...
- DjangoRESTFrameWork中的视图
DRF中的request 在Django REST Framework中内置的Request类扩展了Django中的Request类,实现了很多方便的功能--如请求数据解析和认证等. 比如,区别于Dj ...
- python面向对象之封装，多态与继承
一.继承,包括单继承和多继承 对于面向对象的继承来说,其实就是将多个类共有的方法提取到父类中,子类 仅需继承父类而不必一一实现每个方法. 实例: #coding=utf-8 class Person( ...