【Web开发手礼】探索Web开发的秘密（十七）-Vue2（3）常用组件、案例
程序猿零零漆 2024-08-16 11:33:02 阅读 74
主要介绍了常用组件对话框、表单、以及一个小案例员工管理页面开发！！！
文章目录
前言
常用组件
对话框
表单
案例
布局组件
Axios完成数据异步加载
总结
前言
主要介绍了常用组件对话框、表单、以及一个小案例员工管理页面开发！！！
<code>提示：以下是本篇文章正文内容，下面案例可供参考
常用组件
对话框
Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。
<code><!--对话框-->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>code>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">code>
<el-table :data="gridData">code>
<el-table-column property="date" label="日期" width="150"></el-table-column>code>
<el-table-column property="name" label="姓名" width="200"></el-table-column>code>
<el-table-column property="address" label="地址"></el-table-column>code>
</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>
<code><el-button>：这是一个 Element UI 的按钮组件，通过 @click 事件绑定到 dialogTableVisible 变量，当点击按钮时，将 dialogTableVisible 设置为 true，从而打开对话框。<el-dialog>：这是 Element UI 的对话框组件，用来展示标题为“收货地址”的对话框。:visible.sync="dialogTableVisible"code> 通过 .sync 修饰符双向绑定了 dialogTableVisible 变量，使得当对话框的可见状态改变时，dialogTableVisible 变量也会同步更新。gridData：这是一个包含四个对象的数组，每个对象代表一个表格行，具有 date、name 和 address 三个属性，分别对应日期、姓名和地址。handleSizeChange 和 handleCurrentChange 方法是用来处理表格分页变化时触发的回调函数，分别弹出一个包含当前变化信息的警告框。
表单
Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>code>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">code>
<el-form :model="form">code>
<el-form-item label="活动名称" :label-width="formLabelWidth">code>
<el-input v-model="form.name" autocomplete="off"></el-input>code>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">code>
<el-select v-model="form.region" placeholder="请选择活动区域">code>
<el-option label="区域一" value="shanghai"></el-option>code>
<el-option label="区域二" value="beijing"></el-option>code>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">code>
<el-button @click="dialogFormVisible = false">取 消</el-button>code>
<el-button type="primary" @click="onSubmit">提 交</el-button>code>
</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>
<code><el-button>：点击此按钮会将 dialogFormVisible 变量设为 true，从而显示对话框。<el-dialog>：是 Element UI 的对话框组件，title 属性设置了对话框的标题，:visible.sync="dialogFormVisible"code> 实现了对话框的显示和隐藏控制。<el-form>：Element UI 的表单组件，使用 :model="form"code> 将表单与 form 对象进行双向数据绑定，使得表单项可以自动与 form 对象中的数据同步。<el-form-item>：表单项组件，设置了活动名称和活动区域两个表单项，分别使用 v-model="form.name"code> 和 v-model="form.region"code> 实现数据绑定。<div slot="footer" class="dialog-footer">code>：这里使用了插槽 (slot="footer"code>)，放置了两个按钮，一个用于取消操作 (@click="dialogFormVisible = false"code>)，另一个用于提交表单 (@click="onSubmit"code>)。data 中定义了 dialogFormVisible 控制对话框的显示与隐藏，form 对象存储表单数据，formLabelWidth 设置了表单项的标签宽度。onSubmit 方法用于处理表单提交事件，打印表单数据到控制台并关闭对话框 (dialogFormVisible = false)。
注：JSON.stringify(this.form);可以将form对象转换成json格式数据
案例
布局组件
<code><el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>code>
<el-main>Main</el-main>
</el-container>
</el-container>
页面详细
<template>
<div>
<el-container style="height: 700px; border: 1px solid #eee">code>
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias：智能辅助学习系统</el-header>code>
<el-container>
<el-aside width="200px">code>
<el-menu :default-openeds="['1', '3']">code>
<el-submenu index="1">code>
<template slot="title"><i class="el-icon-message"></i>系统信息管理</template>code>
<el-menu-item index="1-1">部门管理</el-menu-item>code>
<el-menu-item index="1-2">员工管理</el-menu-item>code>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!--表单-->
<el-form :inline="true" :model="searchFrom" class="demo-form-inline">code>
<el-form-item label="姓名">code>
<el-input v-model="searchFrom.name" placeholder="姓名"></el-input>code>
</el-form-item>
<el-form-item label="性别">code>
<el-select v-model="searchFrom.gender" placeholder="性别">code>
<el-option label="男" value="1"></el-option>code>
<el-option label="女" value="2"></el-option>code>
</el-select>
</el-form-item>
<el-form-item label="入职时间">code>
<!--日期选择器-->
<el-date-picker v-model="searchFrom.entrydate" type="datetimerange" range-separator="至"code>
start-placeholder="开始日期" end-placeholder="结束日期">code>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>code>
</el-form-item>
</el-form>
<!--表格-->
<el-table :data="tableData" border>code>
<el-table-column prop="name" label="姓名" width="180">code>
</el-table-column>
<el-table-column prop="image" label="图像" width="180">code>
</el-table-column>
<el-table-column prop="gender" label="性别" width="140">code>
</el-table-column>
<el-table-column prop="job" label="职位" width="140">code>
</el-table-column>
<el-table-column prop="entrydate" label="入职日期" width="180">code>
</el-table-column>
<el-table-column prop="updatedate" label="更新日期" width="210">code>
</el-table-column>
</el-table>
<br>
<!--分页条-->
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"code>
:page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"code>
:total="1000">code>
</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>
使用了<code><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"code>），绑定了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';
<code> <el-table-column prop="image" label="图像" width="180" height="70px">code>
<template slot-scope="scope">code>
<img :src="scope.row.image" alt="">code>
</template>
</el-table-column>
<el-table-column label="性别" width="140">code>
<template slot-scope="scope">code>
{ { 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 方法中进行异步请求进行数据异步加载。
总结
主要介绍了常用组件对话框、表单、以及一个小案例员工管理页面开发！！！
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。