主要介绍了常用组件对话框、表单、以及一个小案例员工管理页面开发！！！
文章目录
前言
常用组件
对话框
表单
案例
布局组件
Axios完成数据异步加载
总结
前言
主要介绍了常用组件对话框、表单、以及一个小案例员工管理页面开发！！！
提示：以下是本篇文章正文内容，下面案例可供参考
常用组件
对话框
Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。
<!--对话框-->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
}
},
methods: {
handleSizeChange: function (val) {
alert("每页记录数变化：" + val)
},
handleCurrentChange: function (val) {
alert("页码是多少：" + val)
}
}
}
</script>
<el-button>：这是一个 Element UI 的按钮组件，通过@click事件绑定到dialogTableVisible变量，当点击按钮时，将dialogTableVisible设置为true，从而打开对话框。<el-dialog>：这是 Element UI 的对话框组件，用来展示标题为“收货地址”的对话框。:visible.sync="dialogTableVisible"通过.sync修饰符双向绑定了dialogTableVisible变量，使得当对话框的可见状态改变时，dialogTableVisible变量也会同步更新。gridData：这是一个包含四个对象的数组，每个对象代表一个表格行，具有date、name和address三个属性，分别对应日期、姓名和地址。handleSizeChange和handleCurrentChange方法是用来处理表格分页变化时触发的回调函数，分别弹出一个包含当前变化信息的警告框。
表单
Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
<!--dialog对话框 form-->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.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="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="onSubmit">提 交</el-button>
</div>
</el-dialog>
<script>
export default {
data() {
return {
dialogFormVisible: false,
form: {
name: '',
region: '',
},
formLabelWidth: '120px'
}
},
methods: {
onSubmit: function () {
console.log(this.form);
this.dialogFormVisible = false;
}
}
}
</script>
<el-button>：点击此按钮会将dialogFormVisible变量设为true，从而显示对话框。<el-dialog>：是 Element UI 的对话框组件，title属性设置了对话框的标题，:visible.sync="dialogFormVisible"实现了对话框的显示和隐藏控制。<el-form>：Element UI 的表单组件，使用:model="form"将表单与form对象进行双向数据绑定，使得表单项可以自动与form对象中的数据同步。<el-form-item>：表单项组件，设置了活动名称和活动区域两个表单项，分别使用v-model="form.name"和v-model="form.region"实现数据绑定。<div slot="footer" class="dialog-footer">：这里使用了插槽 (slot="footer")，放置了两个按钮，一个用于取消操作 (@click="dialogFormVisible = false")，另一个用于提交表单 (@click="onSubmit")。data中定义了dialogFormVisible控制对话框的显示与隐藏，form对象存储表单数据，formLabelWidth设置了表单项的标签宽度。onSubmit方法用于处理表单提交事件，打印表单数据到控制台并关闭对话框 (dialogFormVisible = false)。
注：JSON.stringify(this.form);可以将form对象转换成json格式数据
案例
布局组件
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>页面详细
<template>
<div>
<el-container style="height: 700px; border: 1px solid #eee">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias：智能辅助学习系统</el-header>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
<el-menu-item index="1-1">部门管理</el-menu-item>
<el-menu-item index="1-2">员工管理</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!--表单-->
<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchFrom.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchFrom.gender" placeholder="性别">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="入职时间">
<!--日期选择器-->
<el-date-picker v-model="searchFrom.entrydate" type="datetimerange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table :data="tableData" border>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="image" label="图像" width="180">
</el-table-column>
<el-table-column prop="gender" label="性别" width="140">
</el-table-column>
<el-table-column prop="job" label="职位" width="140">
</el-table-column>
<el-table-column prop="entrydate" label="入职日期" width="180">
</el-table-column>
<el-table-column prop="updatedate" label="更新日期" width="210">
</el-table-column>
</el-table>
<br>
<!--分页条-->
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
:total="1000">
</el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
searchFrom: {
name: '',
gender: '',
entrydate: [],
}
}
},
methods: {
onSubmit: function () {
},
handleCurrentChange: function () {
},
handleSizeChange: function () {
}
},
mounted() {
}
}
</script>
<style></style>
- 使用了
<el-container>、<el-header>、<el-aside>、<el-main>等Element UI组件来进行页面布局。页面整体高度为700px，设置了边框样式。 <el-header>显示系统标题。<el-aside>作为侧边栏，包含了一个垂直的菜单（<el-menu>），默认展开了第一项和第三项。<el-menu>中包含一个<el-submenu>，标题为“系统信息管理”，包含两个<el-menu-item>：部门管理和员工管理。<el-main>部分包含了一个表单和一个表格。- 表单使用了
<el-form>组件，设置为行内布局（:inline="true"），绑定了searchFrom对象作为表单数据模型。 - 表单包含姓名输入框、性别选择框（
<el-select>）、入职时间选择器（<el-date-picker>）、查询按钮（<el-button>）。 - 使用了
<el-table>组件来展示数据，绑定了tableData作为表格数据源。 - 包含了多个
<el-table-column>，每个列对应数据对象的属性（姓名、图像、性别、职位、入职日期、更新日期）。 - 使用了
<el-pagination>组件来实现分页功能，设置了每页显示条数、总条数等属性，监听了页面尺寸变化和当前页变化的事件（@size-change、@current-change）。
script部分：
-
data：
tableData：存储表格数据的数组。searchFrom：存储表单的各个字段，包括姓名、性别、入职时间等，默认为空或空数组。
-
methods：
onSubmit：查询按钮点击事件处理方法，目前为空，需要根据实际需求添加表单提交逻辑。handleCurrentChange和handleSizeChange：分页条目变化时的事件处理方法，目前为空，需要根据实际需求添加分页逻辑。
-
mounted：
mounted生命周期钩子，当前为空，通常用于页面加载后需要进行的初始化操作。
Axios完成数据异步加载
Vue项目中使用Axios:
- 在项目目录下安装axios：npm install axios;
- 需要使用axios时，导入axios：import axios from 'axios';
<el-table-column prop="image" label="图像" width="180" height="70px">
<template slot-scope="scope">
<img :src="scope.row.image" alt="">
</template>
</el-table-column>
<el-table-column label="性别" width="140">
<template slot-scope="scope">
{{ scope.row.gender == 1 ? '男' : '女' }}
</template>
</el-table-column>
<script>
import axios from 'axios';
export default {
data() {
return {
tableData: [],
searchFrom: {
name: '',
gender: '',
entrydate: [],
}
}
},
methods: {
onSubmit: function () {
},
handleCurrentChange: function () {
},
handleSizeChange: function () {
}
},
mounted() {
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
this.tableData = result.data.data;
})
}
}
</script>在mounted 方法中进行异步请求进行数据异步加载。
总结
主要介绍了常用组件对话框、表单、以及一个小案例员工管理页面开发！！！
