Vue前端项目-用户管理-条件搜索界面

最新推荐文章于 2024-07-30 16:12:41 发布

踏浪

最新推荐文章于 2024-07-30 16:12:41 发布

阅读量6.3k

点赞数 6

分类专栏： vue Spring Boot 文章标签：条件搜索表单 el-form表单数据字典

本文链接：https://blog.csdn.net/u010559460/article/details/105340123

版权

这篇博客详细介绍了在Vue项目中实现用户管理页面的条件搜索表单，包括引入Element-UI组件，添加全局样式，挂载获取字典和重置表单的方法，以及涉及的Controller、Service、Mapper接口、Model实体类等相关代码实现。

摘要由CSDN通过智能技术生成

实现效果图：

1、用户管理页面

在 src / views / system / user / index.vue 中,将布局分成 2 列, 然后添加条件搜索表单

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        111
      </el-col>
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" label-width="68px" ref="queryForm" :inline="true">
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入用户名称"
              clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber" >
            <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码"
              clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="用户状态" clearable size="small" style="width: 240px">
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 用户管理列表 -->
        <el-table :data="userList">
          <el-table-column
            type="selection"
            width="40"
            align="center"
          />
          <el-table-column
            label="用户编号"
            align="center"
            prop="userId"
          />
          <el-table-column
            label="用户名称"
            align="center"
            prop="userName"
          />
          <el-table-column
            label="用户昵称"
            align="center"
            prop="nickName"
          />
          <el-table-column
            label="部门"
            align="center"
            prop="dept.deptName"
          />
          <el-table-column
            label="手机号码"
            align="center"
            prop="phonenumber"
            width="120"
          />
          <el-table-column
            label="状态"
            align="center"
          >
            <!-- 通过 slot-scope="scope" 接收数据 -->
            <template slot-scope="scope">
              <!-- scope.row 接收这一行数据 active-value: switch 打开时的值, inactiv