今日主要分享如何运用vue、nodejs、mysql及ant design构建表格数据查询功能，这也是众多项目开发者关注的问题。最关键在于前端与后端的协作，后端数据则通过nodejs编写。尽管涉及多项技术，看似复杂，但实际操作却并非困难。当然，首要条件是熟悉并掌握各项技术。以下为详细步骤：
利用vue3和ant design来实现表格，在使用ant design组件之前首先要安装此组件，具体的安装步骤请详见我的博客中的《Vue3+Ant Design表格排序》这篇文章，这里就不再过多详述。
（1）部分
- <template>
- <div class="user-tab">
- <!-- 查询、重置 -->
- <a-row justify="end" style="padding-top: 10px; padding-right: 15px">
- <a-col :span="1.5">
- <p class="user-admin">用户账号</p>
- </a-col>
- <a-col :span="4">
- <a-input v-model:value="submitForm.adminNick" placeholder="请输入账号" style="width: 200px" />
- </a-col>
- <a-col :span="1"></a-col>
- <a-col :span="1.5">
- <a-button type="primary" style="margin-right: 10px" size="middle" @click="search">查询</a-button>
- </a-col>
- <a-col :span="1.5">
- <a-button type="primary" size="middle" @click="resetSearch">重置</a-button>
- </a-col>
- </a-row>
- <!-- 表格 -->
- <div class="tab-body">
- <a-table
- :columns="columns"
- bordered
- :data-source="dataSource"
- :pagination="pagination"
- :loading="tableLoading"
- rowKey="id"
- :scroll="{ y: 'calc(100vh - 380px - 10px)', x: 200 }"
- >
- <template #index="{ index }">
- {{ index + 1 }}
- </template>
- <template #picture="{ record }">
- <img style="width: 100px; heigth: 100px" :src="record.picture" />
- </template>
- </a-table>
- </div>
- </div>
- </template>
（2）