Element-ui 使用详细介绍

最新推荐文章于 2024-03-18 23:41:44 发布

smile radiantly

最新推荐文章于 2024-03-18 23:41:44 发布

阅读量6.6k

点赞数 2

分类专栏：前端框架文章标签： element

本文链接：https://blog.csdn.net/zhixingwu/article/details/103340919

版权

前端框架专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.后台搭建

使用 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'
      }
    );
  }
}

smile radiantly

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Element-ui 使用详细介绍

一.后台搭建Element是（饿了么团队）基于MVVM框架Vue开源出来的一套前端ui组件。使用 vue-admin-template 来快速搭建后台管理,gathering.vue<template> <div> <br/> <el-form :inline="true"> <el-form-item ...
复制链接

扫一扫