vue3+elementPlus实现列表的查询、翻页和查看功能

效果展示

功能实现

1、列表功能

利用element-plus的组件el-table,轻松实现;

Tips:jokeMes为接口返回的全部数据。

                                        

2、查询功能

利用filter方法,根据输入的数据过滤接口的数据;

              查询  
const onSubmit = () => {  jokeMes.value = temJokeMes.value.filter(    // 查询过滤数据    (item: any) => item.name.indexOf(state.formInline.name) >= 0  )  current_change(1) // 切换到第一页  state.paginObj.total = jokeMes.value.length // 重新设置总数量}

3、翻页功能

利用element-plus的组件el-pagination,轻松实现;

const current_change = (currentPage: number) => {  state.paginObj.currentPage = currentPage  cPage.value = currentPage}

4、查看功能

点击列表查看按钮,获取该条数据,并利用element-plus的组件el-pagination弹窗显示。

                                                                        关闭  

全部代码


发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章