Vue3+TS+element plus实现一个简单列表页面

已于 2024-08-06 21:53:25 修改
阅读量1k 收藏 31
点赞数 15
分类专栏： 项目 文章标签： vue.js
于 2024-08-06 14:10:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73444474/article/details/140953214
版权

期望完成效果

在这里插入图片描述

1.创建一个api

在这里插入图片描述

api内容：
根据接口：
修改 url 和 函数的参数 以及 params里的内容

import { request } from "@/utils/service"
/** 查 */
export function getDyLogDataApi(page: any, limit: any, campaign_id: any, adgroup_id: any, content_id: any) {
  return request({
    url: `/hw/list`,
    method: "get",
    params: {
      key1: "",
      page,
      limit,
      campaign_id,
      adgroup_id,
      content_id
    }
  })
}

2.创建页面显示代码的文件

在这里插入图片描述

3.在vue文件中引入api里的函数

在这里插入图片描述

4.列表数据显示

创建列表并且显示数据
< el-table :data=“tableData” > 这行表示与数据匹配进行渲染
此时要与页面的数据进行匹配，修改 prop 与 label
在这里插入图片描述

<div class="table-wrapper">
        <el-table :data="tableData">
          <el-table-column type="index" width="50" />
          <el-table-column prop="secretAccount" label="账号" align="center" />
          <el-table-column prop="actionType" label="actionType" align="center" />
          <el-table-column prop="campaignId" label="广告计划Id" align="center" />
          <el-table-column prop="adgroupId" label="任务id" align="center" />
          <el-table-column prop="contentId" label="素材id" align="center" />
          <el-table-column prop="callback" label="callback" align="center" />
          <!-- <el-table-column prop="channel" label="channel" align="center" /> -->
          <el-table-column prop="conversionType" label="conversionType" align="center" />
          <!-- <el-table-column prop="deeplink" label="deeplink" align="center" /> -->
          <!-- <el-table-column prop="dyParams" label="dyParams" align="center" /> -->
          <el-table-column prop="eventType" label="eventType" align="center" />
          <el-table-column prop="oaid" label="oaid" align="center" />
          <!-- <el-table-column prop="referrer" label="referrer" align="center" /> -->
          <el-table-column prop="response" label="response" align="center" />
          <el-table-column prop="createTime" label="createTime" align="center" />
        </el-table>
      </div>

其中 < el-table-column type=“index” width=“50” /> 这一行表示的是数据最前面的序号

5.查询功能

  1. 查询的输入表单：
    修改（1）表单输入前面的文字（2）prop，使与数据匹配（3）v-model 双向绑定的内容
<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="campaign_id" label="广告计划">
          <el-input v-model="searchData.campaign_id" placeholder="请输入campaign_id" />
        </el-form-item>
        <el-form-item prop="dgroup_id" label="任务id">
          <el-input v-model="searchData.dgroup_id" placeholder="请输入dgroup_id" />
        </el-form-item>
        <el-form-item prop="content_id" label="素材id">
          <el-input v-model="searchData.content_id" placeholder="请输入content_id" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  1. 查询功能实现
    先声明查询的参数，根据情况修改参数
// 查询条件
const searchData = reactive({
  campaign_id: undefined,
  dgroup_id: undefined,
  content_id: undefined
})

后使用

/**
 * 查询列表数据
 */
const getTableData = () => {
  loading.value = true
  getDyLogDataApi(
    paginationData.currentPage,
    paginationData.pageSize,
    searchData.campaign_id,
    searchData.dgroup_id,
    searchData.content_id
  )
    .then((res: any) => {
      const { data } = res
      paginationData.total = data.total
      tableData.value = data.rows
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

出现的问题

1.数据不能显示

  1. 原因：数据没有进行匹配
    解决措施：重复上述查询功能里的第二步进行核对，只有完全匹配了才能显示数据
  2. 原因：url不匹配
    解决措施：将网页的 url 和给出的进行比较，然后修改页面代码

在这里插入图片描述

  1. 原因：路由出错
    解决措施：核对红框里的内容与创建vue文件的位置、名称是否一致在这里插入图片描述

完整代码

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="campaign_id" label="广告计划">
          <el-input v-model="searchData.campaign_id" placeholder="请输入campaign_id" />
        </el-form-item>
        <el-form-item prop="dgroup_id" label="任务id">
          <el-input v-model="searchData.dgroup_id" placeholder="请输入dgroup_id" />
        </el-form-item>
        <el-form-item prop="content_id" label="素材id">
          <el-input v-model="searchData.content_id" placeholder="请输入content_id" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-tooltip content="刷新当前页">
            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
          </el-tooltip>
        </div>
      </div>

      <div class="table-wrapper">
        <el-table :data="tableData">
          <el-table-column type="index" width="50" />
          <el-table-column prop="secretAccount" label="账号" align="center" />
          <el-table-column prop="actionType" label="actionType" align="center" />
          <el-table-column prop="campaignId" label="广告计划Id" align="center" />
          <el-table-column prop="adgroupId" label="任务id" align="center" />
          <el-table-column prop="contentId" label="素材id" align="center" />
          <el-table-column prop="callback" label="callback" align="center" />
          <!-- <el-table-column prop="channel" label="channel" align="center" /> -->
          <el-table-column prop="conversionType" label="conversionType" align="center" />
          <!-- <el-table-column prop="deeplink" label="deeplink" align="center" /> -->
          <!-- <el-table-column prop="dyParams" label="dyParams" align="center" /> -->
          <el-table-column prop="eventType" label="eventType" align="center" />
          <el-table-column prop="oaid" label="oaid" align="center" />
          <!-- <el-table-column prop="referrer" label="referrer" align="center" /> -->
          <el-table-column prop="response" label="response" align="center" />
          <el-table-column prop="createTime" label="createTime" align="center" />
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { getDyLogDataApi } from "@/api/hw"
import { type FormInstance } from "element-plus"
import { Search, Refresh, RefreshRight } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
/**
 * 华为list
 */
defineOptions({
  name: "HwList"
})

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

const tableData = ref<any[]>([])

const searchFormRef = ref<FormInstance | null>(null)
// 查询条件
const searchData = reactive({
  inParam: undefined,
  outParam: undefined,
  campaign_id: undefined,
  dgroup_id: undefined,
  content_id: undefined
})

/**
 * 查询列表数据
 */
const getTableData = () => {
  loading.value = true
  getDyLogDataApi(
    paginationData.currentPage,
    paginationData.pageSize,
    searchData.campaign_id,
    searchData.dgroup_id,
    searchData.content_id
  )
    .then((res: any) => {
      const { data } = res
      paginationData.total = data.total
      tableData.value = data.rows
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
/**
 * 查询
 */
const handleSearch = () => {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
/**
 * 重置查询
 */
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}
/**
 * 翻页处罚查询
 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
晚晚不晚
关注
  • 15
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
04-19
vue3-pro-table 之前有一个是基于 vue2 开发的 vue3-pro-table 是基于 vue3 开发 一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件 特性 将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量 配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果 配置化的表格项，跟 el-table-column 的配置属性类似 配置化的搜索表单，支持大部分表单元素 配置化的分页，跟 el-pagination 的配置属性类似 自定义是否显示搜索和分页 自定义标题栏和工具栏 丰富的插槽提供功能扩展 使用 安装和引入 安装 // npm npm install vue3-pro-table // yarn yarn add vue3-pro-table 引入 该组件依赖
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
【Vue3】用Element Plus实现列表界面
m0_55394328的博客
03-26 3820
利用vite创建vue3项目噢~创建项目成功后，目录如下👇.vscode：vscode的配置文件node_modules：执行npm时初始化的包文件public：存放公共资源src：存放静态资源，重要文件components：组件文件夹App.vue：根组件main.js：主函数，全局配置的地方，是全局文件index.html：项目的起始页面package.json：项目的配置vite.config.js：vite的项目配置文件，可以配置ip、端口等高级操作。
Vue3列表（List）
最新发布
Mr Dear的博客
08-15 1034
通用列表，支持：是否显示分割线；是否显示边框；三种尺寸；加载中；暂无数据；显示悬浮样式；列表添加操作项；自定义样式；竖排分页列表；总之；功能丰富，简单易用😁😁
vue3+element-plus 封装列表页，分页，排序，导出
鹤渺的星球
10-17 2299
虽然是简单的业务逻辑，但是封装起来使用更方便，这里是记录这种常见类型的列表页的业务需求实现方式。还有一篇实现，可以筛选的表格列 的实现方式。
基于vue3.0简单的页面使用
在无知中学习，在学习中成长，在成长中学习
05-30 1365
基于vue3.0简单的页面使用,包含了vue3的一些基本api
《Vue3+TS》开发一个自己的起始页
2401_84150187的博客
04-08 780
资料过多，篇幅有限，需要文中全部资料可以点击这里获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。),},});小结自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
Spring boot+vue3+element plus实现后台管理系统
07-04
前后端分离项目，Spring boot作为后端，vue框架实现前端，后端整合swagger3测试工具，jwt实现验证码生成，awt生成图形验证码，整合邮箱验证，使用mybatis-generator自动生成实体类以及mapper，设置有拦截器验证登录...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
Vue3+Element-Plus 实现用户列表页面的UI结构及动态加载表单功能 三一
build2024
12-20 7118
1. 用户列表组件UI结构的组成 1.1 头部是一个面包屑（Breadcrumb）导航区域 1.2 白色区域是一个卡片（Card）视图 1.3 卡片 （Card）视图中嵌套了输入框（Input ）、按钮（Button）、表单（Form）、分页（Pagination ） Breadcrumb 面包屑 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 2. 用户列表组件实..
vue前端一个简单的静态页面
2303_76992412的博客
05-27 3554
Vue.js是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue的设计注重灵活性和“可以被逐步集成”的特点，可以用于构建简单的静态页面到复杂的单页应用程序。Vue的核心功能包括声明式渲染和响应性，它能够自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。此外，Vue支持单文件组件，允许开发者将组件的逻辑、模板和样式封装在同一个文件中，便于管理和复用。
ElementPlus的简单使用
qq_53118426的博客
07-12 3264
Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。官方网站：https://element-plus.org/zh-CN/#/zh-CN链接:link。
vue3+element-plus 可编辑列表
qq_33807175的博客
10-24 418
noEditColumns = ["name1", "operate", "priority", "classtypeChinese", "操作"];// --注意此处需要将焦点设置给cellInput，否则onBlur不好使。* 2、column.label ---对应的是标题的中文名称。// 判断输入是否为空，为空则删除input。// 自己的请求在这里书写，下边只是示例。// 定义我们要排除的编辑的列，// 记录要编辑的表格，原本的值。//设置input框样式及类型。// 双击添加input框。
vue3 Element-plus 列表状，权限配置
weixin_44832362的博客
12-08 2164
vue3 Element-plus 列表状，权限配置
Vue3项目练习详细步骤(第一部分：项目构建，登录注册页面)
dafsq的博客
05-27 5562
Vue3项目练习详细步骤(第一部分：项目构建，登录注册页面)
vue3+ts 调用接口，数据显示
weixin_42479421的博客
04-02 1067
typescript 数据展示、筛选展示
Vue3+ElementPlus仿写csdn博客部分功能demo
m0_59350665的博客
07-09 360
往后写的组件如果需要被跳转的，都要来这里注册，以便后续使用。在views文件夹创建一个Index.vue，这个组件是一个容器组件，接下来实现的功能都是在这个组件的基础上实现的。页面的左边是一个功能的菜单栏以及一个发布文章的按钮，在<el-aside></el-aside>模块引入element-plus的菜单组件以及按钮组件，修改一下样式，自己满意即可。然后把编辑器页面的url注册，使用<router-link to="url"></router-link >绑定发表的按钮，通过点击发表访问编辑器页面。
vue3+ts+element-plus做角色菜单分配
10-08
Vue 3和TypeScript（TS）结合使用Element Plus来进行角色菜单分配，是一种很好的选择。下面是一个关于如何实现角色菜单分配的简单示例。 首先，我们需要安装Vue 3、TypeScript和Element Plus。可以使用npm命令进行安装。 ```bash npm install vue@next npm install typescript npm install element-plus ``` 然后，在Vue 3项目的入口文件中，可以引入Element Plus的模块，以及一些额外的样式文件。 ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 在组件中，我们可以使用Element Plus的Menu组件来展示菜单，并通过V-if指令来根据角色进行菜单项的展示与隐藏。 ```vue <template> <div> <el-menu> <el-menu-item v-if="hasAccess('dashboard')">仪表盘</el-menu-item> <el-menu-item v-if="hasAccess('users')">用户管理</el-menu-item> <el-menu-item v-if="hasAccess('roles')">角色管理</el-menu-item> </el-menu> </div> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ data() { return { userRoles: ['dashboard', 'users', 'roles'] } }, methods: { hasAccess(role) { return this.userRoles.includes(role) } } }) </script> <style> /* 根据需要自定义样式 */ </style> ``` 在该示例中，假设用户角色以数组的形式存储在`userRoles`属性中。通过定义一个`hasAccess`方法，我们可以判断用户是否拥有某个角色，然后根据判断结果，在菜单项上使用V-if指令来展示或隐藏对应的菜单项。 当用户拥有某个角色时，该菜单项将会在界面上显示出来，反之，则不会显示。需要注意的是，需根据实际需求对示例中的角色判断逻辑进行调整。 这只是一个简单的示例，实际的角色菜单分配功能可能涉及到更复杂的逻辑和接口调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值