Java体系知识之ElementUI
学习如何借助于ElementUI，帮助快速实现效果
1 技术简介
(1)网站快速成型工具
(2)Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
(3)使用步骤：
A.引入文件：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>
<!-- 引入样式 -->
<link rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
B.根据需求->找对应模板->复制粘贴->修改
2 常用组件(重点)
2.1 Basic
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
</head>
<body>
<div id="root">
<!-- Basic->Layout 布局 -->
<el-row :gutter="30">
<el-col :span="6">
<div class="grid-content bg-purple">111</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple-light">222</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">333</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple-light">444</div>
</el-col>
</el-row>
<!-- Basic->Button 按钮&Icon 图标 -->
<el-row>
<!-- icon：图标 -->
<el-button type="success"
icon="el-icon-star-on"
circle disabled>
提交
</el-button>
</el-row>
<!-- Basic->Link 文字链接 -->
<el-link type="success">成功链接</el-link>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
},
methods: {
},
mounted() {
}
})
</script>
</html>
2.2 Form
2.2.1 basic
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
/* .el-input {
width: 30%;
} */
</style>
</head>
<body>
<div id="root">
<!--
Form->Radio 单选框：
需要设置v-model绑定变量；
选中意味着变量的值为相应 Radio label属性的值；
label可以是String、Number或Boolean；
disabled设置禁用；
-->
<el-radio v-model="radio" label="1">男</el-radio>
<el-radio v-model="radio" label="2" disabled>女</el-radio>
<br>
<br>
<!--
Form->Checkbox 多选框：
checkbox-group元素能把多个 checkbox 管理为一组；
需要在 Group 中使用v-model绑定Array类型的变量即可；
disabled设置禁用；
-->
<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<br>
<!--
Form->Input 输入框：
disabled：禁用；
clearable：清空；
show-password：密码框；
prefix-icon：input 组件首部增加显示图标
suffix-icon：input 组件尾部增加显示图标
type：textarea设置文本域
-->
<!-- <el-input v-model="input" placeholder="请输入内容" show-password></el-input> -->
<!-- <div class="demo-input-suffix">
属性方式：
<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1">
</el-input>
<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2">
</el-input>
</div> -->
<!--
Form->DateTimePicker 日期时间选择器：
value-format：可选，绑定值的格式。不指定则绑定值为 Date 对象，string类型
-->
<div class="block">
<span class="demonstration">默认</span>
<!-- value-format 可选，绑定值的格式。不指定则绑定值为 Date 对象 string -->
<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>{{value1}}
<br>
<!--
Form->Transfer 穿梭框：
Transfer 的数据通过 data 属性传入;
数据需要是一个对象数组；
每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止转移；
目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组；
titles：设置列表标题文案
button-texts：设置按钮文案
-->
<el-transfer v-model="value" :data="transferData" :titles="['未选列表', '已选列表']" :button-texts="['到左边', '到右边']"></el-transfer>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
radio: '1',
checkList: ['选中且禁用', '复选框 A', '复选框 B'],
input: '',
input1: '',
input2: '',
value1: '',
transferData: [{
key: 1,
label: 'Java'
},
{
key: 2,
label: 'Web'
},
{
key: 3,
label: 'Python'
}, {
key: 4,
label: 'UI'
}],
value: [3, 4]
},
methods: {
},
mounted() {
}
})
</script>
</html>
2.2.2 综合案例-登录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
/* Card卡片 */
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
margin: 179px auto;
}
</style>
</head>
<body>
<div id="root">
<!-- Card卡片 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>登录</span>
</div>
<!--
Form表单：
hide-required-asterisk 是否隐藏必填字段的标签旁边的红色星号
-->
<el-form ref="loginForm" :model="loginForm" label-width="80px" :rules="rules" hide-required-asterisk>
<el-form-item label="用户名" prop="userName">
<el-input v-model="loginForm.userName" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item label="密码" prop="userPwd">
<el-input v-model="loginForm.userPwd" show-password prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
loginForm: {
userName: '',
userPwd: '',
},
rules: {
userName: [{
required: true,
message: '请输入用户名',
trigger: 'blur'
},
{
min: 4,
max: 8,
message: '长度在 4 到 8 个字符',
trigger: 'blur'
}
],
userPwd: [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 4,
max: 8,
message: '长度在 4 到 8 个字符',
trigger: 'blur'
}
],
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
console.log(valid);
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
mounted() {
}
})
</script>
</html>
2.3 Data
2.3.1 Table表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="root">
<!--
Table 表格：
el-table：表格
data：显示的数据，array类型
prop：对应对象中的键名即可填入数据
width：定义列宽
stripe：创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用
border：否带有纵向边框，boolean类型，默认是false
row-class-name：为Table 中的某一行添加 class，表明该行处于某种状态
height：固定表头
fixed：固定列，Boolean 值或者leftright，表示左边固定还是右边固定
-->
<el-table :data="tableData" style="width: 80%" :row-class-name="tableRowClassName">
<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="地址" width="180">
</el-table-column>
<el-table-column prop="sex" label="性别" width="180">
<!-- <template slot-scope="scope">
<el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>
{{scope.row.tag}}</el-tag>
</template> -->
<!-- slot-scope="scope" | v-slot="scope" -->
<template v-slot="scope">
<el-tag :type="scope.row.sex === 0 ? 'warning' : 'success'">
<span v-if="scope.row.sex==0">男</span>
<span v-if="scope.row.sex==1">女</span>
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">修改
</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
/* 表格要呈现的数据 */
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
sex: 0
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
sex: 1
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
sex: 0
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
sex: 1
}]
},
methods: {
/* 表格样式 */
tableRowClassName({
row,
rowIndex
}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
/* 修改当前行数据 */
handleEdit(index, row) {
console.log(index, row);
},
/* 删除当前行数据 */
handleDelete(index, row) {
console.log(index, row);
}
},
mounted() {
}
})
</script>
</html>
2.3.2 Pagination 分页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<!--
Pagination 分页：
size-change：每页显示条数pageSize改变时触发
current-change：当前页currentPage改变时触发
current-page：当前页数，number类型，默认值1
page-sizes：每页显示个数选择器的选项设置，number[]类型，比如[10, 20, 30, 40, 50, 100]
page-size：每页显示条目个数，number类型，默认10
total：总条目数，number类型
-->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="20"
layout="total, sizes, prev, pager, next, jumper" :total="40">
</el-pagination>
</div>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
currentPage4: 4
},
methods: {
/* 每页显示数据条数发生改变时 */
handleSizeChange(val) {
console.log(val);
// console.log(`每页 ${val} 条`);
// 使用Axios向服务器端发请求
},
/* 当前页发生改变时 */
handleCurrentChange(val) {
console.log(val);
// console.log(`当前页: ${val}`);
// 使用Axios向服务器端发请求
}
},
mounted() {
}
})
</script>
</html>
2.3.3 Tree 树形控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<!--
分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。
需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的
-->
<div id="root">
<el-tree :data="treeData" show-checkbox node-key="code" :default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys" :props="defaultProps">
</el-tree>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
/* 默认展开 */
expandedKeys:[3],
/* 默认选中 */
checkedKeys:[2,4],
treeData: [{
code: 1,
name: '一级 1',
son: [{
code: 4,
name: '二级 1-1',
son: [{
code: 9,
name: '三级 1-1-1'
}, {
code: 10,
name: '三级 1-1-2'
}]
}]
}, {
code: 2,
name: '一级 2',
son: [{
code: 5,
name: '二级 2-1'
}, {
code: 6,
name: '二级 2-2'
}]
}, {
code: 3,
name: '一级 3',
son: [{
code: 7,
name: '二级 3-1'
}, {
code: 8,
name: '二级 3-2'
}]
}],
defaultProps: {
children: 'son',
label: 'name'
}
},
methods: {
},
mounted() {
}
})
</script>
</html>
2.3.4 Message 消息提示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<!--
使用场景：
增加、修改、删除等操作后，给用户设置提示信息
-->
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
},
methods: {
open2() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open4() {
this.$message({
showClose: true,
/* 利用响应数据：状态码、描述信息、数据 */
message: '登录失败',
type: 'error'
});
}
},
mounted() {
}
})
</script>
</html>
2.3.5 MessageBox 弹框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<!--
使用场景：
执行删除：给用户再次考虑的机会，等用户确定后再真正的执行删除
-->
<el-button type="text" @click="deleteData">删除</el-button>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
},
methods: {
/* 删除操作 */
deleteData() {
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
/* this.$message({
type: 'success',
message: '删除成功!'
}); */
// 使用Axios向服务器端发请求，执行删除
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
mounted() {
}
})
</script>
</html>
2.3.6 综合案例-系统主界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
/* Container 布局容器 */
.el-header,
.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
/* 自增样式 */
html,
body,
#root,
.el-container {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root">
<!-- Container 布局容器 -->
<el-container>
<el-header>
java教育金融系统
<!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu> -->
</el-header>
<el-container>
<el-aside width="200px">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
@close="handleClose">
<!-- 属性绑定 -->
<el-submenu :index="menu.menuId.toString()" v-for="menu in menuList">
<template slot="title">
<!-- 图标 -->
<i :class="menu.menuIcon"></i>
<!-- 插值语法 -->
<span>{{menu.menuName}}</span>
</template>
<el-menu-item-group>
<el-menu-item :index="sub.menuId.toString()" v-for="sub in menu.subMenu">{{sub.menuName}}
</el-menu-item>
<!-- <el-menu-item index="1-2">选项2</el-menu-item> -->
</el-menu-item-group>
</el-submenu>
<!-- <el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航二</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu> -->
</el-menu>
</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
activeIndex2: '1',
// 模拟数据
menuList: [{
"menuId": 1000,
"menuName": "系统模块",
"menuIcon": "el-icon-s-tools",
"subMenu": [{
"menuId": 1001,
"menuName": "用户模块"
}, {
"menuId": 1002,
"menuName": "菜单模块"
}]
}, {
"menuId": 2000,
"menuName": "产品模块",
"menuIcon": "el-icon-s-goods",
"subMenu": [{
"menuId": 2001,
"menuName": "产品系列模块"
}, {
"menuId": 2002,
"menuName": "产品基础模块"
}]
}]
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
queryMenus() {
/* axios.post("", "")
.then(resp => {
console.log(resp);
// 假设服务端返回的数据格式如下
var menus = [{
"menuId": 1000,
"menuName": "系统模块",
"menuIcon": "el-icon-s-tools",
"subMenu": [{
"menuId": 1001,
"menuName": "用户模块"
}, {
"menuId": 1002,
"menuName": "菜单模块"
}]
}, {
"menuId": 2000,
"menuName": "产品模块",
"menuIcon": "el-icon-s-goods",
"subMenu": [{
"menuId": 2001,
"menuName": "产品系列模块"
}, {
"menuId": 2002,
"menuName": "产品基础模块"
}]
}];
this.menuList = menus;
})
.catch(error => {
console.log(error);
}); */
}
},
mounted() {
this.queryMenus();
}
})
</script>
</html>
2.3.7 Dialog 对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<!--
Dialog 对话框:
自定义内容
使用场景：
增加、修改等操作
-->
<!--
点击增加按钮，打开与之关联的增加对话框
-->
<el-button type="success" @click="addDialogFormVisible = true">增加</el-button>
<!--
增加对话框
-->
<el-dialog title="增加" :visible.sync="addDialogFormVisible">
<!--
增加表单
-->
<el-form :model="addForm">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="addForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="addForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<!--
点击取消按钮时：
关闭对话框
点击确定按钮时：
关闭对话框；
向服务器端发请求，执行数据保存操作
-->
<el-button @click="addDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
addDialogFormVisible: false,
addForm: {
name: '',
region: ''
},
formLabelWidth: '120px'
},
methods: {
},
mounted() {
}
})
</script>
</html>
