查询列表 vue3.0 +ant

图样：

vue文件

ToTasks.vue:

<template>
  <div class="ToTasks">
    <div class="ToTasks_seach">
      <a-form layout="inline" :model="searchForm">
        <a-row>
          <a-col :span="18">
            <a-row>
              <a-col :span="8">
                <a-form-item label="名称：">
                  <a-input
                    v-model:value="searchForm.name"
                    placeholder="请输入名称"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col
            :span="6"
            style="display: flex; justify-content: flex-end; flex-wrap: wrap"
          >
            <a-form-item style="width: auto">
              <a-button type="primary" @click="search">查询</a-button>
            </a-form-item>
            <a-form-item style="width: auto">
              <a-button @click="resetSearch">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="ToTasks_content">
      <a-table
        :columns="columns"
        :data-source="searchForm.tableData"
        :pagination="pagination"
        @change="handleTableChange"
        :loading="tableLoading"
        rowKey="id"
      >
        <template #index="{ index }">
          {{ index + 1 }}
        </template>
        <template #createTime="{ record }">
          {{ $moment(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template #action="{ record }">
            <a href="javascript:void(0)" @click="detailGroup(record)">处理</a>
            &nbsp;&nbsp;
            <a href="javascript:void(0)" @click="editGroup(record)">详情</a>
          </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import ToTasks from "./ToTasks";
export default ToTasks;
</script>
<style scoped lang="less" src='./ToTasks.less'>
</style>
<style >
</style>

js文件：

ToTasks.js:

import {
    ref,
    reactive,
    onMounted
} from 'vue';
import {
    message,
} from "ant-design-vue";
import {
    column,
    searchForms,
    paginations,
} from "./ToTasksJson"
import {
    API
} from "../../../../../../../../api/index";
import {
    post
} from "../../../../../../../../api/http";
export default {
    name: "ToTasks",
    setup() {
        //
        let searchForm = reactive(searchForms)
        //列表数据
        const columns = reactive(column)
        //loading
        let tableLoading = ref(false)
        //分页
        let pagination = reactive(paginations)
        const handleTableChange = (paginationing) => {
            console.log("分页")
            pagination.current = paginationing.current;
            pagination.pageSize = paginationing.pageSize;
            searchForm.current = paginationing.current;
            searchForm.size = paginationing.pageSize;
            findMyTodoTaskLists()
        }
        //查询
        const search = () => {
            searchForm.current = 1
            searchForm.size = 10
            pagination.current = 1
            findMyTodoTaskLists()
        }
        //搜索查询列表
        const findMyTodoTaskLists = () => {
            tableLoading.value = true
            post(API.workFlow.findMyCandidateTask, {
                    params: {
                        current: searchForm.current,
                        size: searchForm.size,
                        name: searchForm.name
                    }
                })
                .then((res) => {
                    console.log(res.data)
                    tableLoading.value = false
                    searchForm.tableData = res.data.records
                    pagination.total = res.data.total
                    pagination.pageSize = res.data.size
                })
                .catch((res) => {
                    pagination.total = 0
                    tableLoading.value = false
                    message.error(res);
                });
        }
        //重置
        const resetSearch = () => {
            searchForm.current = 1
            searchForm.size = 10
            pagination.current = 1
            searchForm.name = ""
            findMyTodoTaskLists()
        }

        onMounted(() => {
            pagination.current = 1
            findMyTodoTaskLists()
        })
        return {
            columns, //列表数据
            searchForm,
            tableLoading,
            //分页
            pagination,
            handleTableChange,
            search,
            resetSearch,
        }
    },
    components: {}
};

jsJson文件（用来放大量的数据）

ToTasksJson.js:

export const column = [{
        title: '序号',
        dataIndex: 'index',
        key: 'id',
        slots: {
            customRender: 'index'
        },
        ellipsis: true,
        align: 'center',
        width: "120px"
    }, {
        title: '名称',
        dataIndex: 'name',
        key: 'id',
        ellipsis: true,
        align: 'center'
    }, {
        title: '优先级',
        dataIndex: 'priority',
        key: 'id',
        ellipsis: true,
        align: 'center'
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'id',
        slots: {
            customRender: 'createTime'
        },
        ellipsis: true,
        align: 'center'
    },
]
export let paginations = {
    total: 0,
    current: 1,
    pageSize: 10, //每页中显示10条数据
    showSizeChanger: true,
    pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
    showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
}
export let searchForms = {
    current: 1,
    size: 10,
    tableData: [], //列表table
    name:""
}