【Web开发手礼】探索Web开发的秘密（十七）-Vue2（3）常用组件、案例

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

前言

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

提示：以下是本篇文章正文内容，下面案例可供参考

常用组件

对话框

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

总结

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