基于vue3 ts element-plus生成表格分页查询配置

好的，我们来一步步实现基于Vue3、TypeScript和Element Plus的表格分页查询配置。 1. 首先我们需要安装Vue3、Vue Router、Element Plus和Axios等依赖： ```bash npm install vue@next [email protected] element-plus@next axios ``` 2. 在`main.ts`中引入Vue、VueRouter、Element Plus和Axios： ```typescript import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import axios from 'axios' const app = createApp(App) app.use(router) app.use(ElementPlus) app.config.globalProperties.$axios = axios app.mount('#app') ``` 3. 在`src/components`目录下创建一个`Table.vue`组件，用来展示表格数据： ```html <template> <el-table :data="tableData"> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column> </el-table> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { columns: { type: Array, default: () => [] }, data: { type: Array, default: () => [] } }, computed: { tableData() { return this.data.map(item => { const row = {} this.columns.forEach(column => { row[column.prop] = item[column.prop] }) return row }) } } }) </script> ``` 4. 在`src/components`目录下创建一个`Pagination.vue`组件，用来展示分页控件： ```html <template> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" ></el-pagination> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { currentPage: { type: Number, default: 1 }, pageSize: { type: Number, default: 10 }, total: { type: Number, default: 0 } }, methods: { handleCurrentChange(currentPage: number) { this.$emit('update:currentPage', currentPage) }, handleSizeChange(pageSize: number) { this.$emit('update:pageSize', pageSize) } } }) </script> ``` 5. 在`src/views`目录下创建一个`TableDemo.vue`视图组件，用来展示表格和分页控件： ```html <template> <div> <el-form :inline="true" :model="query" class="table-demo__form"> <el-form-item v-for="field in fields" :key="field.prop" :label="field.label"> <el-input v-model="query[field.prop]" placeholder="请输入"></el-input> </el-form-item> <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button> </el-form> <Table :columns="columns" :data="data"></Table> <Pagination :currentPage.sync="currentPage" :pageSize.sync="pageSize" :total="total"></Pagination> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import axios from 'axios' import Table from '@/components/Table.vue' import Pagination from '@/components/Pagination.vue' export default defineComponent({ components: { Table, Pagination }, setup() { const fields = [ { prop: 'name', label: '姓名' }, { prop: 'age', label: '年龄' }, { prop: 'gender', label: '性别' } ] const columns = [ { prop: 'name', label: '姓名' }, { prop: 'age', label: '年龄' }, { prop: 'gender', label: '性别' } ] const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) const data = ref([]) const query = ref({ name: '', age: '', gender: '' }) const fetchData = async () => { const res = await axios.get('/api/users', { params: { ...query.value, page: currentPage.value, size: pageSize.value } }) data.value = res.data.items total.value = res.data.total } const handleSearch = () => { currentPage.value = 1 fetchData() } fetchData() return { fields, columns, currentPage, pageSize, total, data, query, handleSearch } } }) </script> <style> .table-demo__form { margin-bottom: 20px; } </style> ``` 6. 在`src/router/index.ts`中配置路由： ```typescript import { createRouter, createWebHashHistory } from 'vue-router' import TableDemo from '@/views/TableDemo.vue' const routes = [ { path: '/', name: 'TableDemo', component: TableDemo } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` 7. 在`public`目录下创建一个`api`目录，用来模拟后端接口： ```json // api/users.json { "total": 100, "items": [ { "name": "张三", "age": 18, "gender": "男" }, { "name": "李四", "age": 20, "gender": "女" }, { "name": "王五", "age": 22, "gender": "男" }, { "name": "赵六", "age": 24, "gender": "女" }, { "name": "钱七", "age": 26, "gender": "男" } ] } ``` 8. 在`package.json`中添加一个`dev`命令，用来启动开发服务器： ```json { "scripts": { "dev": "vite" } } ``` 9. 启动开发服务器并访问`http://localhost:3000/`，就可以看到我们的表格和分页控件了。 以上就是基于Vue3、TypeScript和Element Plus的表格分页查询配置的实现步骤。