antd a-list 添加分页
会分为三部分
template
<a-list item-layout="horizontal" :data-source="localData" :pagination="{...paginationProps,current:currentPage}"><a-list-item slot="renderItem" slot-scope="item"><a-list-item-meta><input slot="title" type="checkbox" style="width:15px;height:15px" value="item" @click="select(item)"><a slot="title" href="javascript:void(0);" @click="getsrc(item)">{{ item.name.length > 20 ? item.name.substr(0, 20) + '...' : item.name }}</a></a-list-item-meta><a slot="actions" @click="getsrc(item)">查看</a><a slot="actions" :href="originUrl + item.name" :download="item.name">下载</a><a slot="actions" @click="del(item)">删除</a></a-list-item></a-list>
分页最主要的代码: pagination
<a-list item-layout="horizontal" :data-source="localData" :pagination="{...paginationProps,current:currentPage}"></a-list>
data
// 分页展示的数据localData: [],// 整体的数据localDataSource: [],// 加载第一页的页数 页码数currentPage: 1,// 每页条数pageSize: 14,
js
computed 在页面首次渲染时
// 床位管理的分页paginationProps () {const _this = thisreturn {pageSize: 14,total: this.localDataSource.length,hideOnSinglePage: true,onChange (page, pageSize) {_this.currentPage = pagegetfilelist({page: _this.currentPage,size: _this.pageSize,department: _this.department}).then(res => {const listoption = []const titleIdAll = []res.list.map((item, index) => {const itemoptin = {}itemoptin.id = item.iditemoptin.name = item.content.substr(item.content.lastIndexOf('/') + 1, item.content.length - item.content.lastIndexOf('/'))listoption.push(itemoptin)titleIdAll.push(item.id)_this.titleIdAllToday = titleIdAll})_this.localData = listoption// 初始化input所有的框var input = document.getElementsByTagName('input')for (var i = 0; i < input.length; i++) {input[i].checked = false}}).catch(() => {this.$message.error('获取列表失败')_this.display = false})}}}
也在computed里
...mapGetters(['department']),
穿插一个小知识 字符串截取 与本文分页无关
itemoptin.name = item.content.substr(item.content.lastIndexOf('/') + 1, item.content.length - item.content.lastIndexOf('/'))
js methods
// 获取列表getfilelist () {getfilelist({department: this.department}).then(res => {this.localDataSource = res.listif (this.localDataSource.length > 0) this.display = true}).catch(() => {this.$message.error('获取列表失败')this.display = false})getfilelist({page: this.currentPage,size: this.pageSize,department: this.department}).then(res => {const listoption = []const titleIdAll = []res.list.map((item, index) => {const itemoptin = {}itemoptin.id = item.iditemoptin.name = item.content.substr(item.content.lastIndexOf('/') + 1, item.content.length - item.content.lastIndexOf('/'))listoption.push(itemoptin)titleIdAll.push(item.id)this.titleIdAllToday = titleIdAll})this.localData = listoptionif (this.localData.length > 0) this.display = true// }}).catch(() => {this.$message.error('获取列表失败')this.display = false})},
相关文章:
antd a-list 添加分页
会分为三部分 template <a-list item-layout"horizontal" :data-source"localData" :pagination"{...paginationProps,current:currentPage}"><a-list-item slot"renderItem" slot-scope"item"><a-list-ite…...
MySQL注入绕安全狗脚本 -- MySQLByPassForSafeDog,以及端口爆破工具 -- PortBrute配置使用
工具介绍 此Tamper仅仅适用于MySQL数据库,在SQLMap使用过程中添加参数–tamperMySQLByPassForSafeDog。 安装与使用 1、安装网站安全狗Apache最新版 2、启用安全狗,不加MySQLByPassForSafeDog绕狗Tamper: python sqlmap.py -u "http://192.168.…...
R语言绘制热图
1、初步绘图 rm(listls())#clear Global Environment setwd(D:/Desktop/0000/code-main/热图)#设置工作路径#加载R包 library (pheatmap) #读取数据 df <- read.table(file"data.txt",sep"\t",row.names 1, headerT,check.namesFALSE) #查看前3行 hea…...
jmeter线程组 bzm - Concurrency Thread Group 阶梯式压测
简介 bzm - Concurrency Thread Group 不是JMeter的官方插件,而是一种由Blazemeter提供的高级线程组插件,它提供了更灵活的并发性能测试设置。它可以在不同的时间内并发执行不同数量的线程,模拟不同的负载场景。 插件下载地址(jme…...
计算即时订单比例-首单使用开窗函数row_number()
1 需求 即时订单和计划订单 订单配送中,如果期望配送日期和下单日期相同,称为即时订单,如果期望配送日期和下单日期不同,称为计划订单。 请从配送信息表(delivery_info)中求出每个用户的首单(用…...
flink集群与资源@k8s源码分析-集群
0 介绍 本文是flink集群与资源@k8s源码分析系列的第二篇-集群 1 场景 下面详细分析各用例 2 启动k8s集群 k8s集群支持session和application模式,job模式将会被废弃,本文分析session模式集群 Configuration作为配置容器,几乎所有的构建需要从配置类获取配置项,这里不显示…...
商城开发:商城系统的哪些功能值得企业去关注?
电子商务行业的快速发展,企业们越来越重视建设自己的在线商城。选择一个功能强大的商城系统对于企业的成功至关重要。那么,有哪些商城系统的功能值得企业去关注呢? 一、用户体验提升 ①. 响应式设计 移动设备的普及,大部分用户通…...
calibre和cpolar搭建一个私有的网络书库
Kindle中国电子书店停运不要慌,十分钟搭建自己的在线书库随时随地看小说! 文章目录 Kindle中国电子书店停运不要慌,十分钟搭建自己的在线书库随时随地看小说!1.网络书库软件下载安装2.网络书库服务器设置3.内网穿透工具设置4.公网…...
c++ nlohmann::json 中文支持
c nlohmann::json 是当前排名第一人库,但是在解析中文时会有问题 std::string to_utf8(std::wstring& wide_string) {static std::wstring_convert<std::codecvt_utf8<wchar_t>> utf8_conv;return utf8_conv.to_bytes(wide_string); }void test_nl…...
vue3 | defineExpose的使用
简介 使用<script setup>的组件是默认关闭的————即通过模板引用或者$parent链获取到的组件的公开实例,不会暴露在任何在<script setup>中声明的绑定 换句话说,如果一个子组件使用的是选项式 API 或没有使用 <script setup>&…...
PaddleSeg学习3——使用PP-LiteSeg模型对道路进行分割
使用PP-LiteSeg模型对道路进行分割 1 准备环境2 样本3 准备config文件4 模型训练5 模型预测5.1 python预测5.2 C++预测5.3 预测结果展示1 准备环境 参考上一篇:Windows PaddleSeg c++部署 2 样本 车道线分割实战的智能车数据集 #标签 背景:0, 0.05 单实线-黄...
时序数据库的关键技术点总结
总结时序数据库的关键技术点 内存 SQL解析LSM Tree(WAL)skiplist内存合并,有序落盘LRU 时序文件索引缓存 存储层 时间分区设备分区 索引文件 时间戳范围索引布隆过滤器索引brin 索引btree 索引多层索引 数据文件(tskv…...
【ROS】机器人使用Nomachine进行远程控制
官网:NoMachine - Free Remote Desktop for Everybody 支持的系统: WindowsMacLinux 树莓派其他ARM板IOSAndroid 由于网速问题,可以使用我下载好的:(8.8.1_1) 链接:https://pan.baidu.com/s/…...
Jmeter系列-定时器Timers的基本介绍(11)
简介 JMeter中的定时器(Timer)是一种重要的元件,用于模拟用户在不同时间间隔内发送请求的场景。通过使用定时器,可以模拟负载、并发和容量等不同情况下的请求发送频率。 使用定时器 可以在取样器下添加定时器,这样定…...
【华为OD机试python】求满足条件的最长子串的长度【2023 B卷|100分】
【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度, 字符串本身是其最长的子串,子串要求: 1、 只包含1个字母(a~z, A~Z),其余必须是数字; 2、 字母可以…...
iOS技术博主指南:填写苹果应用上架中的隐私政策信息
摘要:本文将详细介绍iOS技术博主在苹果应用上架过程中如何填写隐私政策信息。博主可以通过App Store Connect为应用程序提供隐私政策网址和用户隐私选项网址,并了解如何填写隐私政策文本。本文将提供步骤和注意事项,帮助博主顺利完成隐私政策…...
Spring事件机制之ApplicationEvent
博主介绍:✌全网粉丝4W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…...
【操作系统笔记】内存寻址
物理寻址 主存(内存) 计算机主存也可以称为物理内存,内存可以看成由若干个连续字节大小的单元组成的数组每个字节都有一个唯一的物理地址(Physical Address)CPU访问内存前,先拿到内存地址,然后…...
webpack自定义loader解析指定后缀名文件
案例: webpack自定义loader解析.chenjiang后缀名的文件 整体目录: chenjiangLoader.js文件代码 // 正则匹配script标签中的内容 const REG /<script>([\s\S]*)<\/script>/;module.exports function (source) {const __source source.…...
基于Kintex UltraScale系列FPGA KU060/KU115高性能PCIe数据预处理载板(5GByte/s带宽)
PCIE702是一款基于PCIE总线架构的高性能数据预处理FMC载板,板卡具有1个FMC(HPC)接口,1路PCIe x8主机接口、1个RJ45千兆以太网口、2个QSFP 40G光纤接口。板卡采用Xilinx的高性能Kintex UltraScale系列FPGA作为实时处理器࿰…...
Cesium 地球(2)-瓦片创建
Cesium 地球(2)-瓦片创建 QuadtreePrimitive代码执行4个步骤: step1: update()step2: beginFrame()step3: render()step4: endFrame() 但并不是瓦片的创建步骤。 1、创建 QuadtreeTile 基于 step3: render() step3: render()┖ selectTilesForRendering()在 selectTilesFo…...
Selenium-介绍下其他骚操作
Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 的浏览器(如 Chrome、Opera 和 Microsoft Edge)中的工具,用于帮助开发人员调试和研究网站。 借助 Chrome DevTools,开发人员可以更深入地访问网站…...
【C++从0到王者】第三十一站:map与set
文章目录 一、关联式容器二、pair键值对三、set1. set的介绍2. set的部分接口以及应用3. count4. lower_bound和upper_bound5. equal_range6. multiset容器 四、map1. map的介绍2. map的一些常见接口以及使用3. map的[]运算符重载4. 使用map改进一些题5. multimap容器 五、map和…...
生产消费者模型的介绍以及其的模拟实现
目录 生产者消费者模型的概念 生产者消费者模型的特点 基于阻塞队列BlockingQueue的生产者消费者模型 对基于阻塞队列BlockingQueue的生产者消费者模型的模拟实现 ConProd.c文件的整体代码 BlockQueue.h文件的整体代码 对【基于阻塞队列BlockingQueue的生产者消费者模型…...
Unity ML-Agents默认接口参数含义
下面的含义就是训练中常用的yaml文件: behaviors:waffle:trainer_type: ppo #训练器类型,默认ppo。还有sac和pocahyperparameters:batch_size: 64 # 梯度下降每次迭代的经验数。应确保该值总是比 buffer_size小几倍。 在使用连续动作的情况下&#x…...
【python数据分析基础】—pandas中loc()与iloc()的介绍与区别
文章目录 前言一、loc[]函数二、iloc[]函数三、详细用法loc方法iloc方法 总结共同点不同点 前言 我们经常在寻找数据的某行或者某列的时常用到Pandas中的两种方法iloc和loc,两种方法都接收两个参数,第一个参数是行的范围,第二个参数是列的范…...
ad18学习笔记十一:显示和隐藏网络、铺铜
如何显示和隐藏网络? Altium Designer--如何快速查看PCB网络布线_ad原理图查看某一网络的走线_辉_0527的博客-CSDN博客 AD19(Altium Designer)如何显示和隐藏网络 如何显示和隐藏铺铜? Altium Designer 20在PCB中显示或隐藏每层铺铜-百度经验 AD打开与…...
全国职业技能大赛云计算--高职组赛题卷④(私有云)
全国职业技能大赛云计算--高职组赛题卷④(私有云) 第一场次题目:OpenStack平台部署与运维任务1 基础运维任务(5分)任务3 OpenStack云平台运维(15分)任务4 OpenStack云平台运维开发(1…...
Camera Tunning ISP 模块面试总结
一.ISP的调试流程概述: 在ISP调试流程中,我们首先需要确认以下三个方面:项目需求、硬件问题确认和Sensor驱动配置确认。 项目需求方面,即Sensor需要出多大的分辨率去调效果;因为有些芯片有最大分辨率支持的限制&#x…...
AOSP源码中Android.mk文件中的反斜杠符号(\)的作用和使用
简介 在AOSP(Android Open Source Project)源码中的Android.mk文件中,反斜杠符号(\)的主要作用是将一行代码拆分成多行,以提高可读性并帮助组织较长的代码块。这对于定义复杂的构建规则和变量时特别有用。…...
wordpress跟php/重庆seo网站收录优化
如果用jquery的话: var lable_a $(li).children(a); lable_a.click(function() { lable_a.css(color, black); $(this).css(color, red); });...
asp.net.做简单的网站/网络推广公司运作
//C string 函数列表【 C string|C string所有的成员函数】/*----------------------------------------- begin 得到指向字符串开头的Iterator end 得到指向字符串结尾的Iterator rbegin 得到指向反向字符串开头的Iterator rend 得到指向反向字符串结尾的Iterator …...
创建个人网站的步骤/深圳网站优化软件
【51CTO精选译文】说到监控Linux设备,眼下有好多方法可供选择。虽然有许多适用于生产环境的监控解决方案(比如Nagios、Zabbix和Zenoss)声称拥有漂亮的用户界面、监控可扩展性以及全面报告功能等,但这些解决方案对我们大多数最终用户来说恐怕是大材小用。…...
织梦dede新闻网站源码手机站/做优化关键词
有意义的命名 一.命名范围:变量,方法,参数,类名,包名;文件名,文件夹。 二.命名规则 1.名副其实:看到名字,就应该了解其代表的意义,其用途很自然地理解其功能。 2.避免…...
免费开源网站/国外搜索引擎排行榜
csc.exe使用来编译*.cs文件的,但必须要在安装目录下使用。所以需要设置一下环境变量。 C#的环境变量设置 1.“winR” 打开运行窗口,并输入 “cmd”; 2.运行“set path%path%;C:\Windows\Microsoft.NET\Framework\v4.0.30319”(不包含“”)。后…...
北京市住房和建设委员会网站/东莞营销网站建设
http://pengranxiang.iteye.com/blog/848862 首先我们先介绍一下为什么要让 Apache 与 Tomcat 之间进行连接。事实上 Tomcat 本身已经提供了 HTTP 服务,该服务默认的端口是 8080,装好 tomcat 后通过 8080 端口可以直接使用 Tomcat 所运行的应用程序&…...