JavaWeb——Vue组件库Element（5/6）：案例：组件实现（概述、Form表单、Table表格、Pagination 分页、效果展示、完整代码）

qiyi.sky

于 2024-10-04 08:00:00 发布

阅读量879

点赞数 27

分类专栏： JavaWeb 文章标签： vue.js 前端 javascript 学习笔记

本文链接：https://blog.csdn.net/li13437542099/article/details/141200142

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

概述

在刚才制作出来的页面当中，上面项目的名称已制作好，左侧的菜单栏也已配置好。

接下来主要处理的是右侧主展示区域当中的组件编写。

在右侧的主展示区域，主要有 3 个组件。上方有一个表单组件，这个表单用来收集用户输入的查询条件。中间一块是一个表格，表格的下面是有一个分页条。

所以接下来，我们需要在表格的上面增加一个 Form 表单，在表格的下面增加一个分页条。而这个表单是在一行当中展示的。接下来，我们就参照 Element 所提供的组件进行改造。

Form表单

先打开 VS Code，看一下表单应放在哪个位置。

主展示区域是这个 el-main，这里已有一个 el-table 表格。刚才提到，在表格的上方应该有一个表单，所以应在这个表格的上方增加一个 Form 表单。我们打开 Element 的官网，找到表单的源代码拿来改造。

之前提到过，行内表单是指将表单项放在一行当中展示，这正是我们需要的。此时直接点击显示代码，将里面的代码用 Ctrl+C 复制，在相应位置 Ctrl+V 粘贴过来，对格式稍微做规整即可。

复制过来的这个表单当中只有两个表单项和一个查询按钮，表单中的表单项数据绑定到一个数据模型叫做 formInline 当中，这个名字可读性不强，我们改造为 searchForm，所有表单项都绑定到 searchForm 这个对象当中。

上面通过 v-model 绑定了数据模型，这个数据模型必须在下面声明，它是一个对象，里面两个属性，一个是 name，一个是 gender。所以在下面，在数据模型当中定义这个对象，对象使用大括号，一个是 name 代表姓名，一个是 gender 代表性别。这样数据模型就定义好了。

然后再往上看，下面点击查询时会触发一个方法 onSubmit，接下来在下面定义一个 view 当中的方法 methods，在 methods 当中定义一个方法 onSubmit，点击提交时会触发这个方法，在这个方法中可以直接 alert 一个提示信息，代表要查询数据了。Form 表单的基本结构就准备好了。

接下来打开浏览器看效果，有两个表单项，一个姓名一个性别，性别是下拉框，有男有女。

接下来，表单中除了姓名性别，还有一个入职日期。这个表单项是入职日期，其体现形式不是输入框，而是日期选择器，这里不能再使用简单的 el-form，需要使用日期选择器。

还要绑定属性值：

这样，上面的表单就完善好了

Table表格

中间的表格部分，我们之前已制作好，可以再为表格加上一个边框，使其看起来更好看，在Table当中增加一个属性 border 即可。

Pagination 分页

接下来，在表格的下面增加一个分页条，在这个位置增加一个分页条，分页条之前用到过，可以直接将之前制作的分页条的内容用 Ctrl+C、Ctrl+V 复制过来，

里面还有两个方法需要复制过来，一个是 handleSizeChange，一个是 handleCurrentChange，直接复制过来，在最下面粘贴即可。

效果展示

接下来再次打开浏览器，会看到上面的表单、中间的表格以及下面的分页条已经展示出来。

表格和分页条之间比较拥挤，可以在中间加上一个简单的换行解决这个问题。

由于当前表格中没有数据，所以会展示在一起，等将数据动态加载返回后，就不会存在这个问题了。这就是第二步操作，完成各个部分的组件实现。

完整代码

项目内部文件：EmpView.vue

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tlias 智能学习辅助系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1" style="background-color: rgb(215, 215, 215)">
              <template slot="title"><i class="el-icon-message"></i>系统信息管理 &nbsp;&nbsp; >></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="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

            <el-form-item label="入职日期">
              <el-date-picker
                v-model="searchForm.entryDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </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="updateTime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br />
          <!-- 分页条 -->
          <el-pagination
            background
            layout="total,sizes,prev, pager, next,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entryDate: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      alert("查询数据");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style>
</style>

END

学习自：黑马程序员——JavaWeb课程