好的，我们来一步步实现基于
Vue3、TypeScript和
Element Plus的表格分页查询配置。
1. 首先我们需要安装
Vue3、
Vue Router、
Element Plus和Axios等依赖：
```bash
npm install
vue@next
vue-router@4.0.0-beta.8
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的表格分页查询配置的实现步骤。
2932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
