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

期望完成效果

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>

2. 查询功能实现
   先声明查询的参数，根据情况修改参数

// 查询条件
const searchData = reactive({campaign_id: undefined,dgroup_id: undefined,content_id: undefined
})

后使用

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

出现的问题

1.数据不能显示

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

3. 原因：路由出错
   解决措施：核对红框里的内容与创建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-paginationbackground: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 = truegetDyLogDataApi(paginationData.currentPage,paginationData.pageSize,searchData.campaign_id,searchData.dgroup_id,searchData.content_id).then((res: any) => {const { data } = respaginationData.total = data.totaltableData.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>