Vue前端项目-代码生成-主页(查询表格数据)

最新推荐文章于 2024-07-31 09:59:24 发布

踏浪

最新推荐文章于 2024-07-31 09:59:24 发布

阅读量4.2k

点赞数 1

分类专栏： vue Spring Boot Ruoyi项目文章标签：代码生成-主页查询所有表

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

版权

本文详细介绍了如何在Vue前端项目中实现代码生成和主页查询表格数据的功能。从创建前端页面，包括代码生成页面、条件搜索、功能按钮区和表格组件，到获取表格数据、实现条件搜索和重置功能，每个步骤都有清晰的代码示例和实现效果展示。重点讲解了数据绑定和后台接口的调用。

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

1、前端页面

1.1 代码生成页面

创建 src / views / tool / gen / index.vue 页面，内容如下

<template>
  <div class="app-container">
    111
  </div>
</template>

<script>
export default {
  name: "Gen",
  data() {
    return {};
  },
};
</script>

启动前后端，登录后查看效果如下：

1.2 添加条件搜索

注意：

本章教程的所有操作都是在 src / views / tool / gen / index.vue 页面上进行，为了不每次都粘贴整个页面内容会导致文章过程，因此用到哪些内容，就写哪些
这一步只是单纯的写页面，搜索和重置后面步骤在写

条件搜索的表单：

    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="表名称" prop="tableName">
        <el-input
          v-model="queryParams.tableName"
          placeholder="请输入表名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="表描述" prop="tableComment">
        <el-input
          v-model="queryParams.tableComment"
          placeholder="请输入表描述"
          clearable
          size="small"
        />
      </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="结束日期"