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

功能实现

1、列表功能

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

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

<el-table    stripe    :data="      jokeMes.slice(        (paginObj.currentPage - 1) * paginObj.pagesize,        paginObj.currentPage * paginObj.pagesize      )    "    style="width: 100%"    v-loading="loading"    empty-text="没有数据"  >    <el-table-column fixed prop="passtime" label="时间" width="150" />    <el-table-column prop="name" label="名字" width="120" />    <el-table-column prop="text" label="信息" width="600" />    <el-table-column prop="header" label="图片" width="600" />    <el-table-column prop="video" label="视频" width="600" />    <el-table-column prop="top_comments_content" label="内容" width="300" />    <el-table-column fixed="right" label="操作" width="60">      <template #default="scope">        <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>      </template>    </el-table-column>  </el-table>

2、查询功能

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

<el-form :inline="true" :model="formInline" class="demo-form-inline">  <el-form-item label="姓名">    <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>  </el-form-item>  <el-form-item>    <el-button type="primary" @click="onSubmit">查询</el-button>  </el-form-item></el-form>
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,轻松实现;

<el-pagination    background    v-model:currentPage.sync="cPage"    layout="prev, pager, next"    :total="paginObj.total"    @current-change="current_change"    style="margin-top: 15px"  ></el-pagination>
const current_change = (currentPage: number) => {  state.paginObj.currentPage = currentPage  cPage.value = currentPage}

4、查看功能

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

<el-drawer v-model="drawer" title="详情页面">    <el-form :inline="true" :model="formInline" class="demo-form-inline details">      <el-form-item label="姓名">        <el-input v-model="details.name" placeholder="" disabled></el-input>      </el-form-item>      <el-form-item label="内容">        <el-input v-model="details.top_comments_content" placeholder="" disabled></el-input>      </el-form-item>      <el-form-item label="时间">        <el-input v-model="details.passtime" placeholder="" disabled></el-input>      </el-form-item>    </el-form>    <div style="text-align: center;"><el-button type="primary" @click="drawer = false">关闭</el-button></div>  </el-drawer>

全部代码


<template>  <el-form :inline="true" :model="formInline" class="demo-form-inline">    <el-form-item label="姓名">      <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>    </el-form-item>    <el-form-item>      <el-button type="primary" @click="onSubmit">查询</el-button>    </el-form-item>  </el-form>  <el-table    stripe    :data="      jokeMes.slice(        (paginObj.currentPage - 1) * paginObj.pagesize,        paginObj.currentPage * paginObj.pagesize      )    "    style="width: 100%"    v-loading="loading"    empty-text="没有数据"  >    <el-table-column fixed prop="passtime" label="时间" width="150" />    <el-table-column prop="name" label="名字" width="120" />    <el-table-column prop="text" label="信息" width="600" />    <el-table-column prop="header" label="图片" width="600" />    <el-table-column prop="video" label="视频" width="600" />    <el-table-column prop="top_comments_content" label="内容" width="300" />    <el-table-column fixed="right" label="操作" width="60">      <template #default="scope">        <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>      </template>    </el-table-column>  </el-table>  <el-pagination    background    v-model:currentPage.sync="cPage"    layout="prev, pager, next"    :total="paginObj.total"    @current-change="current_change"    style="margin-top: 15px"  ></el-pagination>  <el-drawer v-model="drawer" title="详情页面">    <el-form :inline="true" :model="formInline" class="demo-form-inline details">      <el-form-item label="姓名">        <el-input v-model="details.name" placeholder="" disabled></el-input>      </el-form-item>      <el-form-item label="内容">        <el-input v-model="details.top_comments_content" placeholder="" disabled></el-input>      </el-form-item>      <el-form-item label="时间">        <el-input v-model="details.passtime" placeholder="" disabled></el-input>      </el-form-item>    </el-form>    <div style="text-align: center;"><el-button type="primary" @click="drawer = false">关闭</el-button></div>  </el-drawer></template><script setup lang="ts">import { ref, Ref, reactive, toRefs, onMounted } from 'vue'import axios from '../utils/axios'const loading = ref(false) // 是否显示加载效果const jokeMes: Ref = ref([]) // 表格数据const temJokeMes: Ref = ref([]) // 临时表格数据const cPage = ref(1)const drawer = ref(false)const details: Ref = ref(null)const state = reactive({  formInline: {    // 搜索数据    name: ''  },  paginObj: {    // 翻页数据    currentPage: 1,    pagesize: 10,    total: 0  }})onMounted(() => {  loading.value = true  // 调用接口,获取列表数据  axios    .get('/getJoke?page=1&count=100&type=video')    .then((response) => {      console.log('response: ', response.data.result)      jokeMes.value = response.data.result      temJokeMes.value = response.data.result      state.paginObj.total = response.data.result.length      loading.value = false    })    .catch((error) => {      loading.value = false      console.error(error)    })})// 查询操作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 // 重新设置总数量}const handleClick = (row: any) => {  console.log(row)  drawer.value = true  details.value = row}// 点击翻页const current_change = (currentPage: number) => {  state.paginObj.currentPage = currentPage  cPage.value = currentPage}const { formInline, paginObj } = toRefs(state)</script><style lang="less">.el-table .el-table__cell {  height: 48px;  padding: 0;}.details .el-form-item {  width: 100%;}</style>
本文链接:https://www.dzdvip.com/36740.html 版权声明:本文内容均来源于互联网。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 395045033@qq.com,一经查实,本站将立刻删除。
(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年8月2日 23:11
下一篇 2022年8月2日 23:17

相关推荐

  • 如何获取bing站长工具API的地图密钥?

    SEO优化:如何获取bing站长工具API地图密钥?Bing站长工具已经偷偷推出了网站的URL推送功能。这是学习百度的节奏吗?并且支持通过API的方式向Bing推送链接数据,同时可以通过Bing站长工具手动提交网站链接数据。 Bing 的 bing 搜索网站管理员工具启动了 url 链接推送功能,它也支持 api 链接数据推送,尽管你也可以手动提交链接数据,这里有一个关于如何使用 bing 的 bing 网站管理员工具来推送网站链接地址的详细说明。 下面重点讲的是使用必应搜索Bing站长工具的API密钥推送网站链接地址,登录必应搜索Bing站长工具可以使用Microsoft、Google或Facebook ID帐号进行注册登录。 如果你是一个新用户,你需要先注册 bing 的网站管理员工具帐户,一旦你登录,系统会提示你添加一个网址。如果你使用谷歌的网站管理员工具,你可以直接导入你的数据,这很方便,你也可以手动添加你自己的网站地址。 注意:在必应搜索站长平台添加的网站域名必须要与站点域名一致,如果有多个子域名,则都是需要添加进去的。     如果你已经登录了必应搜索站长工具,可以点击网站左上角网站列表,添加未添加的网站地址,完成网站地址添加后,点击右上角设置按钮,选择API访问,如下图所示:     在下图中点击选择“API密钥”,如下图所示:     如果你是首次使用必应搜索站长具的API接口,那么还需要点击生成“API密钥”,如下图所示:     点击“生成API密钥”后,就会有一连串字母数字组合的API密钥,你可以进行重新生成、删除等操作,如下图所示:     API密钥是针对必应搜索站长工具帐户而生成的,所以用户可以为所有通过验证的网站使用同一串API密钥字符。

    2021年9月2日
    36
  • 腾讯向股东派发京东股票意味着啥

    腾讯(00700.HK)周四(12月23日)早上公告,拟实施中期股息分配,计划以实物分派的方式按每21股腾讯股票获1股京东集团(09618.HK)A类普通股。这种以所持股票来对其股东分红,并牵涉两家赫赫有名的中资科技股,马上引起投资人高度关注。 腾讯此次分红后,不再为京东第一大股东,但仍然持有京东约2.3%的股份。腾讯方面的解释为:京东已经能自主募资发展,现转让持有的京东大部分权益符合腾讯投资策略,未来腾讯和京东依然保持牢固合作伙伴关系。 公告称, 拟以实物分派的方式,宣派由公司通过Huang River间接持有约4.57亿股京东集团A类普通股,以作为特别中期股息。这笔4.57亿股京东A类普通股相当于腾讯现持京东普通股的约86.4%以及于2021年12月21日京东集团已发行股份总数约14.7%。 是时候退出了 至于为何采取实物分配的原因。腾讯董事会解释,实物分派符合公司及股东的利益。 腾讯表示,其投资策略是:投资处于发展阶段的公司,这样被投资的公司可受益于腾讯带来的长期资本,为其发展及扩张提供便利; 支持及分享被投公司的增长; 并在被投公司可为其未来计划自行筹集资金的时候退出。 腾讯董事会认为,京东集团已达到可为其自身未来发展自主募资的阶段。因此,是时候转让出腾讯持有京东的大部分权益。 实物分派完成后,京东集团将不再作为联营公司并入腾讯的财务报表。实物分派完成后对腾讯的盈利或亏损影响将在实物分派结算日期后确定。 公告表示,根据实物分派,腾讯的股东将有权收取其于京东集团股份的按比例权益,也可以通过市场变现。实物分派将使腾讯股东能有弹性地自行决定参与投资京东集团股份的程度。 腾讯还指出,此次以实物分派的方式是基于当前的具体情况。尽管公司会定期考虑以适当方式回报价值予股东,但不保证未来会宣派或作出类似的股息或分派。 腾讯强调,尽管本次实物分派了京东的股份,但腾讯及京东集团将继续保持互利的业务关系,包括持续的战略合作协议。 刘炽平辞任京东董事 京东方面同日早上公告,宣布刘炽平已从公司董事会辞任,刘炽平目前是腾讯的执行董事兼总裁。公司强调,京东已经知悉腾讯的派息计划,京东和腾讯将继续保持互惠共赢的商业合作关系,包括现有的战略合作协议。 “我谨代表集团向刘炽平先生为董事会近八年的服务表示衷心的感谢。”京东集团董事会主席兼首席执行官刘强东表示,“在任职董事会期间,刘炽平先生以丰富…

    2021年12月24日
    11
  • 什么是网络推广带你了解新上线的网站该如何提升关键词排名?

    什么是网络推广之在做网站优化时,关键词优化也是整个优化工作的重中之重,因为关键词排名对网站的推广以及用户认可等都具有重要的作用。尤其是新上线的网站来说,更要注重关键词SEO优化方法,下面什么是网络推广就带大家一起来了解一下。 1、提前做好词库规划布局 尤其对新网站来说,在整个网站关键词布局中,标题是参与最重要的位置。所以,网站优化想要参与排名,就要做好网站标题的布局和设置,网站优化前期就是需要做好词库整理拓展和关键词布局优化。 2、内容靠谱更新提交 无论是新老网站,在做内容优化方面,一定要坚持保证内容的原创性、高质量性、创新性等,才能有效的满足用户需求和解决用户问题,提升用户良好体验。同时,优质的内容的更容易能被索引和获得好的排名,所以新站也一定要做好网站的内容优化。 3、有效收录才能排名 网站想要参与关键词排名,就要确保是有效收录。并不是看搜索引擎收录的数量,而是看网站被收录率,收录率越高,有效收录也就越高,就能帮助网站排名靠前,所以什么是网络推广建议大家要做好网站的相关结构布局和层次设置,确保蜘蛛高质量爬行,有效收录。 4、外链友链促进排名 外链建设、友链交换都是有助于提升网页关键词排名的,什么是网络推广表示,并且优质的外链建设会帮助网站吸引更多的用户浏览,不仅能给网站带来更多流量,还能吸引更多粉丝,逐步提升网站的信任度,从而帮助提升页面关键词排名,对网站权重增加也有好处。 5、提升排名用户点击 网页有了有效收录后,如果还想要排名靠前,还需要依靠用户行为的点击,页面质量高,用户才会点击,停留,用户通过搜索关键词检索到网站并通过页面解决了问题,满足了需求,搜索引擎也会给猪这个页面更好的关键词排名。 以上就是什么是网络推广为大家总结的几点有关新站关键词排名优化的技巧分享,通过以上相信大家对新站的优化也有更多了解,并知道该如何下手,做好以上几点,能很好地帮助新站取得良好的排名。

    2021年8月3日
    12
  • 自己有车可以做什么副业?

    随着经济条件越来越好,很多人都有自己的私家车,同时也导致很多人的私家车开得特别少,并且使用率不高,车辆长期闲置不仅对车子本身不好而且要交保险的费用,对于很多人来说都想利用闲置的时间看看能不能挣点外快。 经常有有个朋友问我自己的车子有哪些途径可以利用起来挣点外快,下面我就跟大家分享一下可以用私家车做兼职和副业的项目。 1、跑闪送 在一些相对来说规模还算不错的城市都有线上平台,比如闪送、同城快递等等,闪送是有汽车单的,比如说送合同、衣服、钥匙等一些相对体积较大或者贵重的东西。很多私家车主都会在闲暇时间开着自己的车出去跑闪送,可以为自己增加一些额外收入,嫌贵来说还是非常不错的。 2、租给别人当作是婚车 在一些坐车平台可以把自己的车租给别人当作是婚车,当然名车和知名的品牌相对来说会比较吃香一点。而且车子的档次越高,能够拿到的钱也就越多。如果车子非常昂贵,那么出席一次婚车的话,可能会拿到好几千是很爽的事情。 3、跑网约车 之前跟大家也聊过,如果自己的车子不是很昂贵的车子,也可以考虑在下班时间跑跑网约车,时间很自由也可以认识不同的人,运气好的话有时候也是能接到很多大单的。 4、租给租车公司 自己有车如果不常开的话放在家里会贬值不说,而且长时间不开动的话,车子的一些零部件容易生锈容易损坏,可以挂在租车平台上租给租车公司,让租车公司来打理。有人如果通过租车平台下单就能够有收入了,前期是要和对方签订合同,约定好相应的规则。 5、接一些车身广告 如果不介意自己车上有一些广告,可以接一些车身广告,可以在网上查找相关的内容,觉得适合自己的就去联系商家,也可以自己在网上发帖让商家主动来找自己,这样的话每个月也会有收入,需要注意的就是在贴的时候稍微用好一点的材质,因为等你不想合作的时候也会比较好撕掉。 可能还有没说全的一些副业,如果有知道的朋友可以一起分享出来。

    2021年5月27日
    30
  • 3·15曝光12大乱象多家公司被点名;网信部进驻豆瓣督促整改

    今天是3月16日,星期三。昨夜今晨,科技圈有哪些大事发生,欢迎关注今日科技早报。 央视“3·15”晚会曝光12大乱象,多家公司被点名 2022年央视“3·15”晚会开播,节目曝光了直播运营违规、“造假”粉条、医美乱象等问题。涉及行业事项及公司如下: 1、直播运营:女主播微信实为男运营专骗粉丝大哥,涉及公司:聚享互娱传媒公司、华亿播商贸有限公司。 2、网络直播带货欺诈:翡翠直播间借高价原石发廉价成品,缅甸翡翠代购直播间实为国内写字楼布景。 3、搜索操纵:口碑营销公司操纵搜索结果,涉及公司:英迈思。 4、免费WIFI陷阱:免费WiFi手机App根本连不上,免费WiFi暗藏漏洞,涉及公司:WiFi破解精灵、雷达WiFi、越豹WiFi助手。 5、“土坑”老坛酸菜:部分老坛酸菜包是土坑腌制,涉及公司:湖南插旗菜业有限公司、雅园菜业。 6、“造假”粉条:名特产禹州红薯粉条为廉价木薯所做。 7、软件下载捆绑:软件下载平台高速下载藏陷阱,200余家软件下载站或涉捆绑下载,涉及公司:PC6下载网站、桔梗下载站、腾牛网、Zol软件下载、马鞍山百助网络科技有限公司。目前腾牛网、ZOL、PC6等网站均已无法打开,页面显示整改中。 8、骚扰电话:浏览网页就能泄露手机号,涉及公司:融营通信公司、容联七陌公司、杭州以渔公司、郑州绿牵网络科技有限公司、青牛公司、乘移信息技术有限公司。其中容联七陌是上市企业容联云通讯旗下子公司。 9、儿童智能手表:低配的儿童智能手表成“行走的偷窥器”。 10、电动自行车:多家品牌电动自行车公然违规提速,涉及公司:绿源、小牛、哈啰、新日、金箭、台铃等。 11、非标线缆:华南最大五金市场惊现不达标线缆,多为广东揭阳小厂生产,涉及公司:世海电缆。 12、医美:中消协5年间收到医美行业投诉增长近14倍,涉及公司:美希淑颜医疗美容、蚌埠柏美思医疗美容、郑州星美教育信息咨询有限公司、圣嘉丽禾培训学校。 2021年超500款违规App被下架 2021年全年,工信部累计检测208万款App,通报1549款违规App,对514款拒不整改的App进行下架处理。监管加强同时,法律保障也不断完善。2021年9月1日和11月1日,《数据安全法》和《个人信息保护法》先后正式施行,对应用程序过度收集个人信息、“大数据杀熟”等行为作出针对性规范。 去年我国集成电路产量为3594 亿,同比增长33….

    2022年3月16日
    17
  • iOS 15.5 RC 续航测试结果来了(iOS 15.5续航怎么样)

    5月13日苹果发布了iOS 15.5 RC版本,相隔9天iOS15.5 RC包含对苹果的增强功能现金卡、Apple 播客以及其他功能和错误修复。iOS 15.5 RC版本小编第一时间测试了续航。 iOS15.5 RC版本续航测试来了,对比iOS15.5 beta4发热、续航如何?(仅供参考) 机型:iPhone13 mini 系统:iOS15.5 RC 网络:4G 测试项目: 刷视频30分钟:100%-100%,掉电0% 刷微博30分钟:100%-94%,掉电6% 爱奇艺120分钟:94%-65%,掉电29% 王者60分钟:65%-39%,掉电26% 机型:iPhone13 mini系统:iOS15.5 RC网络:Wi-Fi测试项目:刷视频30分钟:100%-100%,掉电0%刷微博30分钟:100%-94%,掉电6%爱奇艺120分钟:94%-76%,掉电18%王者60分钟:76%-54%,掉电22% 相同的环境、相同的时间、相同亮度下测试,每个版本续航相差不大。有些人升级续航掉电快,可能电池健康比较低,使用不同,应用是否最新版本以及系统需要适配。如果你的掉电快,可以看下电池健康多少,接近80%可以考虑换电池。 本人测试都是大家日常使用的应用,数据仅供大家参考,每个人使用不同,屏幕亮度以及环境不同,测试结果也有所不同,但是续航每个版本相差的可以忽略不计。 总结:iOS 15.5 RC 版续航测试结果和iOS 15.5 beta 4剩余电量整体增加2-7%。4G状态下整体对比上个版本保持一致剩余电量39%,刷视频有明显的续航提升,4G状态下王者比iOS 15.5 beta 4发热明显,流畅度细滑,没有出现卡顿现象,爱奇艺续航有所下降。Wi-Fi状态下续航比iOS 15.5 beta4增加了2%,玩游戏发热不明显,王者续航比上个测试版有所提升,频率没有出现不稳定。整体测试结果4G状态下有所提升,Wi-Fi整体体验还不错。你们觉得iOS 15.5 RC续航怎么样?可以作为你的养老版本?

    2022年5月14日
    76