【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:这是一个包含四个对象的数组,每个对象代表一个表格行,具有 datename 和 address 三个属性,分别对应日期、姓名和地址。handleSizeChange 和 handleCurrentChange 方法是用来处理表格分页变化时触发的回调函数,分别弹出一个包含当前变化信息的警告框。

 表单

Form 表单:由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。

<code><!--dialog对话框 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:查询按钮点击事件处理方法,目前为空,需要根据实际需求添加表单提交逻辑。handleCurrentChangehandleSizeChange:分页条目变化时的事件处理方法,目前为空,需要根据实际需求添加分页逻辑。

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 方法中进行异步请求进行数据异步加载。


总结

主要介绍了常用组件对话框、表单、以及一个小案例员工管理页面开发!!!



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。