Element-ui使用心得



安装

npm 方式:

npm i element-ui -S

ui 界面方式:

插件搜索 element

注意:以下 element 标签名都是类名

Form 表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt />
</div>
<!-- 登录表单区域 :ref相当于dom返回对象,可以用于重置表格 :model绑定熟悉class- loginForm :rules表单校验规则-->
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="loginFormRules"
label-width="0px"
class="login_form"
>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
prefix-icon="el-icon-user-solid"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
prefix-icon="el-icon-lock"
type="password"
></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button @click="login" type="primary">登录</el-button>
<el-button @click="reset" type="info">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
reset() {
// 重置表单所有内容
this.$refs.loginFormRef.resetFields()
}

loginForm: {
username: '',
password: 0
},
loginFormRules: {
username: [{ required: true, message: '用户名不能为空' }],
password: [{ validator: valiCateDeleted, trigger: 'blur' }]
},

表单校验:

1
2
3
4
5
6
7
8
data() {
var valiCateDeleted = (rule, value, cb) => {
if (value === 0 || value === '1' || value === '0') {
cb()
}
cb(new Error('0代表有效,1代表失效'))
}
return {

注意表单校验:typeof value 查:少用 0,第一次是 number,但第二次就成了 string

From 表单_详情链接

导航菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
<el-container class="home-container">
<!-- 头部区域 -->
<el-header>
<div>
<img
src="http://coderblue.cn/images/ayer.png"
width="46px"
height="46px"
/>
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 页面主体区域 -->
<el-container>
<!-- 侧边栏 isCollapse:true就只有一级菜单的大小,false就是完整大小-->
<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="toggle-button" @click="toggleCollapse">|||</div>
<!-- 侧边栏菜单区域 每次只展开一个或者绑定属性
:unique-opened="true" collapse-transition:是否开启折叠动画 collapse:是否水平折叠收起菜单
router:启用了v-router的模式,以index为path跳转
:default-active:被点击的链接激活状态-->
<el-menu
:default-active="$route.path"
unique-opened
:router="true"
:collapse="isCollapse"
:collapse-transition="false"
background-color="#333744"
text-color="#fff"
active-text-color="#ffd04b"
>
<!-- 一级菜单 -->
<el-submenu
:index="item.id + '' + index"
v-for="(item, index) in menuList"
:key="item.id"
>
<!-- 一级菜单的模板区 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>
<!-- 文本 -->
<span>{{ item.authName }}</span>
</template>

<!-- 二级菜单 -->
<el-menu-item
:index="'/' + subItem.path"
v-for="subItem in item.children"
:key="subItem.id"
>
<i class="el-icon-menu"></i>
<span>{{ subItem.authName }}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧内容主体 -->
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>

方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<script>
export default {
data() {
return {
// 左侧菜单数据
menuList: [{ authName: '用户管理', id: 125, order: 1, path: 'users' }],
// 配置一级菜单图标
iconsObj: {
125: 'el-icon-user-solid',
103: 'el-icon-lock',
101: 'el-icon-shopping-bag-2',
102: 'el-icon-shopping-cart-full',
145: 'el-icon-tickets'
},
isCollapse: false
}
},
created() {
this.getMenuList()
},
methods: {
logout() {
// 清空token
window.sessionStorage.clear()
// 跳转
this.$router.push('/login')
},
getMenuList() {
this.$axios
.get('/login?username=admin&&password=123456', {})
.then(res => {
this.menuList = [
{
authName: '用户管理',
id: 125,
order: 1,
path: 'users',
children: [
{
authName: '用户列表',
id: 225,
order: 2,
path: 'users'
}
]
},
{
authName: '权限管理',
id: 103,
order: 1,
path: 'rights',
children: [
{
authName: '角色列表',
id: 203,
order: 2,
path: 'roles'
},
{
authName: '权限列表',
id: 204,
order: 2,
path: 'powers'
}
]
},
{
authName: '商品管理',
id: 101,
order: 1,
path: 'goods',
children: [
{
authName: '商品列表',
id: 200,
order: 2,
path: 'goods'
},
{
authName: '分类列表',
id: 199,
order: 2,
path: 'classify'
},
{
authName: '商品分类',
id: 198,
order: 2,
path: 'goodsClass'
}
]
},
{
authName: '订单管理',
id: 102,
order: 1,
path: 'orders',
children: [
{
authName: '订单列表',
id: 202,
order: 2,
path: 'orders'
}
]
},
{
authName: '数据统计',
id: 145,
order: 1,
path: 'reports',
children: [
{
authName: '数据报表',
id: 245,
order: 2,
path: 'reports'
}
]
}
]
})
},
// 点击按钮切换菜单的折叠展开
toggleCollapse() {
this.isCollapse = !this.isCollapse
}
}
}
</script>

NavMenu 导航菜单

Table 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<template>
<div>
<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card class="box-card">
<!-- 搜索与添加区域:Layout栅格布局
gutter 属性来指定每一栏之间的间隔,默认间隔为 0。
span 属性布局,总共24份-->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
<!-- 用户列表区域 -->
<el-table :data="userList" border stripe>
<el-table-column label="#" type="index"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="电话" prop="telephone"></el-table-column>
<el-table-column label="角色" prop="role"></el-table-column>
<el-table-column label="状态" prop="status">
<template v-slot="scope">
<div>
<!-- {{ scope.row }}:每一行的json都展示 -->
<el-switch
@change="changeStatus(scope.row)"
inactive-value="0"
active-value="1"
v-model="scope.row.status"
></el-switch>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template v-slot>
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
></el-button>
<el-tooltip
effect="dark"
content="分配角色"
placement="top"
:enterable="false"
>
<el-button style="padding: 0px;">
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
></el-button>
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
</div>
</template>

效果展示:

Table 表格

MessageBox 弹框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}

MessageBox 弹框

Dialog 对话框

1
2
3
4
5
6
7
8
9
10
11
12
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>

Dialog 对话框

Cascader 级联选择器

1
2
3
4
5
6
7
8
9
<el-cascader
v-model="selectedCatKeys"
:options="cascaderList"
:props="cateProps"
clearable
filterable
ref="cascader"
@change="handleChange"
></el-cascader>

data 中的定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 级联选择器的值列表
cascaderList: [],
// 级联选择器的配置
cateProps: {
label: 'catName',
value: 'id',
children: 'children',
// 设置每一级都可以选中
checkStrictly: true,
// 设置悬浮展开
expandTrigger: 'hover'
},
// 级联选择器双向绑定到数组中
selectedCatKeys: [],

methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 级联选择器选中项变化会触发的函数
handleChange() {
// 被选中数据的id数组
if (this.selectedCatKeys.length === 1) {
// 数据操作
}
},
// 绑定在添加分类对话框的:关闭时清空值
closeAddDialog() {
this.$refs.addFormRef.resetFields()
// 很无奈:this.$refs.cascader.clearCheckedNodes is not a function"
// 清空级联选择器表明上显示值
this.$refs.cascader.inputValue = ''
// 清空被选中的
this.$refs.cascader.checkedValue = ''
}

效果展示:

vue-table-with-tree-grid 使用

  1. Use npm:

    npm i vue-table-with-tree-grid -S

  2. Usage:在 main.js 中

    1
    2
    3
    import TreeTable from "vue-table-with-tree-grid";

    Vue.component("tree-table", TreeTable);

Demo 代码演示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<tree-table
class="treeTable"
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text="#"
border
:show-row-hover="false"
>
<!--是否有效区域:等同于 slot="isOk" slot-scope="scope" -->
<template v-slot:isOk="scope">
<i
class="el-icon-success"
style="color: lightgreen;"
v-if="scope.row.catDeleted === 0"
></i>
<i class="el-icon-error" style="color: red;" v-else></i>
</template>
<!-- 排序 -->
<template v-slot:sort="scope">
<el-tag size="mini" v-if="scope.row.catLevel === 0">一级</el-tag>
<el-tag size="mini" v-else-if="scope.row.catLevel === 1" type="success"
>二级</el-tag
>
<el-tag size="mini" v-else type="warning">三级</el-tag>
</template>
<!-- 操作 -->
<template v-slot:option="scope">
<el-button type="primary" size="mini" @click="showEditDialog(scope.row)"
><i class="el-icon-edit">编辑</i></el-button
>
<el-button type="warning" size="mini"
><i class="el-icon-delete">删除</i></el-button
>
</template>
</tree-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 商品分类的列表数据
cateList: [
{
catName: '电视机',
catDelete: false,
children: [
{ catName: '看电视', children: [{ catName: '喜羊羊与灰太狼' }] }
]
},
{
catName: '洗衣机',
catDelete: true,
children: [{ catName: '洗衣服' }]
}
],
// 为table指定列的定义
columns: [
{
label: '分类名称',
prop: 'catName'
},
{
label: '是否有效',
// 表示,将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板名称
template: 'isOk'
},
{
label: '排序',
// 表示,将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板名称
template: 'sort'
},
{
label: '操作',
// 表示,将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板名称
template: 'option'
}
]

效果展示:

官方文档:

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信