首页
视频
资源
登录
风清月
愿你出走半生,归来仍是少年
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
mvc
9篇
c#面试题
1篇
爬虫
1篇
Redis
1篇
NET
37篇
JS相关
2篇
Oracle
1篇
随笔
30篇
学点小英语
9篇
Vue.js
3篇
jquery
2篇
Sqlerver
7篇
前端
53篇
ps
1篇
net core
39篇
更多
架构
9篇
rpc
1篇
EF
6篇
mui
8篇
微服务
8篇
微信
1篇
.net
5篇
svn
1篇
人工智能
6篇
nginx
4篇
docker
14篇
git
4篇
c++
3篇
linux
11篇
uniapp
7篇
k8s
23篇
python
3篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue3 Element ui Plus 表格 分页,vue3 el-pagination分页
8453
人阅读
2022/7/21 9:57
总访问:
1643985
评论:
0
收藏:
0
手机
分类:
前端
其实就是el-pagination控件的使用而已 ``` <template> <div> <el-table :data="tableData" stripe="true" size="small" border="true"> <el-table-column label="Id" prop="id" width="60" /> <el-table-column label="宗地位置" prop="landName" /> <el-table-column label="地块位置" prop="areaposition" /> <el-table-column label="控规编号" prop="kgnumber" /> <el-table-column label="供应方式" prop="provideType" /> <el-table-column label="土地面积" prop="landarea" /> <el-table-column label="平均容积率'" prop="floorarearatio" /> <el-table-column align="center" fixed="right" label="操作" show-overflow-tooltip width="200" > <template #default="{ row }"> <el-button text type="primary" @click="handleDetail(row)"> 详情 </el-button> <el-button text type="primary" @click="handleEdit(row)"> 编辑 </el-button> <el-button text type="primary" @click="handleDelete(row)"> 删除 </el-button> </template> </el-table-column> </el-table> <LandInfoEdit ref="editRef" @fetch-data="fetchData" /> <el-pagination background :current-page="queryForm.pageNo" :layout="layout" :page-size="queryForm.pageSize" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" /> </div> </template> <script> import { getList } from '@/api/landInfo' export default defineComponent({ name: 'dynamicTable', components: { LandInfoEdit: defineAsyncComponent(() => import('./components/LandInfoEdit') ), }, setup() { const state = reactive({ editRef: null, tableData: [], layout: 'total, sizes, prev, pager, next, jumper', total: 0, queryForm: { pageNo: 1, pageSize: 3, title: '', }, }) const fetchData = async () => { // const result = await getList() // state.tableData = result.data const { data: { list, total }, } = await getList(state.queryForm) state.tableData = list state.total = total } const handleSizeChange = (val) => { state.queryForm.pageSize = val fetchData() } const handleCurrentChange = (val) => { state.queryForm.pageNo = val fetchData() } const queryData = () => { fetchData() } const handleEdit = (row) => { state['editRef'].showEdit(row) } onMounted(() => { fetchData() }) return { ...toRefs(state), queryData, handleEdit, fetchData, handleSizeChange, handleCurrentChange, } }, }) </script> ``` 接口返回数据的格式如下: ``` { "code": 200, //成功的状态码 "msg": "success", //提示信息 "data": { //返回数据 "list": [{},{},{}], //返回数组 "total": 238, //总条数(表格中用到,其它接口可以不返回) } } ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}