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

期望完成效果

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
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

其中 < 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

// 查询条件
const searchData = reactive({
  campaign_id: undefined,
  dgroup_id: undefined,
  content_id: undefined
})
1
2
3
4
5
6

后使用

/**
 * 查询列表数据
 */
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

出现的问题

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161