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

期望完成效果

1.创建一个api

api内容：

根据接口：

修改 url 和函数的参数以及 params里的内容

typescript 复制代码

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

javascript 复制代码

<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）表单输入前面的文字（2）prop，使与数据匹配（3）v-model 双向绑定的内容

javascript 复制代码

<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>

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

javascript 复制代码

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

后使用

javascript 复制代码

/**
 * 查询列表数据
 */
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.数据不能显示

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

原因：路由出错
解决措施：核对红框里的内容与创建vue文件的位置、名称是否一致

完整代码

html 复制代码

<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>