Element-ui使⽤详细介绍
⼀.后台搭建
使⽤来快速搭建后台管理，它包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
Element是（饿了么团队）基于MVVM框架Vue开源出来的⼀套前端ui组件。官⽹：
1.快速搭建
若⽤vue官⽹提供的脚⼿架需要写跟多代码，⽐如登录界⾯、主界⾯菜单等。可以使⽤ vue-admin-template ，在此基础上开发，⽽且github上配有详细的模板说明，这样可以节省开发时间。
1. 下载vue-admin-template(vue
2.0)进⾏解压
2. 在命令提⽰符切换到该⽬录，输⼊命令安装所有依赖：
cnpm install
3. 运⾏
npm run dev
2.⼯程结构
⽬录名称存储内容
build构建⼯程相关脚本
config配置相关
src⼯程源码
static静态资源
src/api访问后端API
src/utils⼯具类
src/views路由组件
src/router路由
3.项⽬初始化
1. 关闭语法规范性检查
修改config/index.js : useEslint = false
2. 国际化设置
修改main.js :
import locale from 'element‐ui/lib/locale/lang/en' --> import locale from 'elemen‐ui/lib/locale/lang/zh‐CN'
3. 与easy-mock对接
修改config下v.js中BASE_API为easy-mock的Base URL，easy-mock最好部署到服务器上
BASE_API: '"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": "wpimg.wallstcn/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
}
}
4.更改标题与菜单
1. 修改index.html的标题为“后台管理系统”，修改后浏览器⾃动刷新。
2. 修改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',
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',vue element admin
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 >
<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="w.id)">修改</el-button>
<el-button type="text" size="small" @click="w.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(){
this.list=response.data
});
}
}
}
</script>
当没有使⽤template模板页时，⼀般加上prop属性，若有template时，可以为：
<el-table-column label="主机名" min-width="2">
<template slot-scope="scope">{{w.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.$w)">查看</el-button>
<el-button type="info" size="small" :disabled="w.status !== '空闲'" @click="createTask(scope.$w)">新建</el-button>
</template>
</el-table-column>
slot-scope⽤于指定当前⾏的上下⽂。使⽤w可以获取⾏对象。
table组件的属性：
参数说明类型data显⽰的数据array
table-column组件的属性：
参数说明类型label显⽰的标题string
prop对应列内容的字段名string
width对应列的宽度number
min-width按⽐例显⽰宽度number
官⽅⽂档：
2.分页组件
<el‐table :data="list" border ></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=ws
});
}
}
}
</script>
上⾯的分页⽅式是数据量⽐较⼤是传currentPage, pageSize给后端，由后端来实现分页；数据量⽐较⼩时由前端实现分页，如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。