移动端列表筛选封装

适合场景:Vue2+vant 移动端项目,数据填充添加全部选项及相关逻辑处理,支持多选、单选以及筛选状态返回

效果图

选中交互

使用说明

<filter-box ref="filterBox" :isMultiple="true" //是否多选:params="waitData" //参数:filterOption="filterOption"//选项数组@submit="handleSearch" //提交的回调@cancel="filterCancel"//关闭的回调
>
</filter-box>//案例
waitData: {自定义参数: 参数,//如分页参数等filterTitle: '全部筛选',hasSearch: false,//选中状态typeIdList: null,tipIdList: null,
},
filterOption: [{title: '文章类型',prop: 'typeIdList',option: []},{title: '文章标签',prop: 'tipIdList',option: []},
],
//@submit和@cancel回调返回的参数是处理完毕的。
//处理完毕的参数,isMultiple为是则返回数组,false则为字符串

源码

附件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1544116.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

为什么无线物联网通信技术是智能家居的首选

无线物联网通信技术成为智能家居的首选&#xff0c;主要基于以下几个方面的原因&#xff1a; 一、便捷性与灵活性 无需布线&#xff1a;无线物联网通信技术最大的优势在于其无需复杂的布线工作。在智能家居系统中&#xff0c;这意味着用户无需在墙壁中开凿线路&#xff0c;也无…

夜间红外图宠物检测系统源码分享

夜间红外图宠物检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…

如何使用VM中win10搭建Hfish蜜罐(危险感知平台)。从下载到部署详细教程

得而不惜就该死。 -----古月方源 引言&#xff1a;最近跟一个老师做东西&#xff0c;叫我搞清楚蜜罐的搭建和一些底层逻辑&#xff0c;所以记录一下。 一、实验准备 &#xff08;一&#xff09;win10虚拟机 &#xff08;若有需要可以后台私信&#xff09; &#xff08;二&…

库仑定律-库仑力-两个电荷之间静电力的计算公式

图中&#xff1a; q1&#xff0c;q2 为两个电荷r 为电荷间的距离 r ^ 1 , 2 \widehat{r}_{1,2} r 1,2​ 为从 q1 指向 q2 的单位向量 F ⃗ 1 , 2 \vec{F}_{1,2} F 1,2​ 为 q1 施加到 q2 上的静电力 公式&#xff1a; F ⃗ 1 , 2 q 1 q 2 K r 2 r ^ 1 , 2 \vec{F}_{1,2} \f…

WordPress精选文章如何添加侧边栏和页面?

WordPress精选帖子是一项功能&#xff0c;可让用户在其网站主页或其他值得注意的部分突出显示特定帖子。这些精选帖子通常以视觉上独特的方式显示&#xff0c;例如以滑块、网格或轮播格式显示&#xff0c;以提高其可见性和对访问者的吸引力。 网站所有者可以手动选择他们想要推…

合规性强化:等保测评中的政策与标准遵循

在信息化高速发展的今天&#xff0c;信息安全已成为国家安全的重要组成部分&#xff0c;而等级保护测评&#xff08;简称“等保测评”&#xff09;作为确保信息系统安全的重要手段&#xff0c;其合规性强化显得尤为重要。等保测评不仅是对信息系统安全性能的全面评估&#xff0…

并发编程工具集——Fork/Join-上(三十六)

简述 前面提到的线程池、Future、CompletableFuture 和 CompletionService&#xff0c;这些工具类都是在帮助我们站在任务的视角来解决并发问题&#xff0c;而不是让我们纠缠在线程之间如何协作的细节上&#xff08;比如线程之间如何实现等待、通知等&#xff09;。精髓&#x…

Angular由一个bug说起之十:npm Unsupported engine

我们在用npm下载包的时候&#xff0c;有时候会碰到这样的提示 这是npm的警告&#xff0c;说我们使用的nodejs版本与下载的包所要求的nodejs版本不一致。 这是因为有些包它对nodejs的版本有要求&#xff0c;然后就会在package.json文件里的engines字段里声明它所要求的nodejs版本…

【SemeDrive】【X9HP】【PTG4.3】解决Partition Flash Error及PTG4.3二级分区烧录与升级问题

前言&#xff1a;PTG4.1 之前的版本使用的都是普通 emmc 和 一级分区表&#xff0c;PTG4.3 新增了 virtio-eMMC 功能和二级分区表的设置&#xff0c;因此关于 PTG4.3 的烧录和升级有以下几个疑问和解答。 一、名词解释 virtio-eMMC&#xff1a;基于 Virtio 框架的虚拟化 EMMC…

Java面试篇基础部分-Semaphore及其用法详解

Semaphore 是一种基于计数的信号量&#xff0c;在定义信号量对象的时候可以设置一个阈值&#xff0c;然后基于这个阈值&#xff0c;多线程可以竞争访问信号量&#xff0c;线程竞争到许可的信号之后&#xff0c;开始执行具体的业务逻辑&#xff0c;业务逻辑在执行完成之后释放这…

并发编程工具集——CompletionService(三十五)

利用 CompletionService 实现 Dubbo 中的 Forking Cluster Dubbo 中有一种叫做 Forking 的集群模式&#xff0c;这种集群模式下&#xff0c;支持并行地调用多个查询服务&#xff0c;只要有一个成功返回结果&#xff0c;整个服务就可以返回了。例如你需要提供一个地址转坐标的服…

sentinel基于Nacos数据持久化

sentinel基于Nacos数据持久化 1.引入依赖 <!-- 持久化用到 --> <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-datasource-nacos</artifactId> </dependency>2.yml配置 server:port: 8091tomcat:max-thre…

【深度学习】03-神经网络01-4 神经网络的pytorch搭建和参数计算

# 计算模型参数,查看模型结构,我们要查看有多少参数&#xff0c;需要先安装包 pip install torchsummary import torch import torch.nn as nn from torchsummary import summary # 导入 summary 函数&#xff0c;用于计算模型参数和查看模型结构# 创建神经网络模型类 class Mo…

一体化运维监控管理平台的全面监控能力

在当今高度信息化的时代&#xff0c;运维监控管理平台的重要性日益凸显。一个优秀的监控平台不仅要能够全面覆盖各类IT和智能设备&#xff0c;还需具备灵活性和可扩展性&#xff0c;以适应不断变化的监控需求。本文旨在深入探讨一体化运维监控管理平台的全面监控能力&#xff0…

MySQL record 08 part

数据库连接池&#xff1a; Java DataBase Connectivity&#xff08;Java语言连接数据库&#xff09; 答&#xff1a; 使用连接池能解决此问题&#xff0c; 连接池&#xff0c;自动分配连接对象&#xff0c;并对闲置的连接进行回收。 常用的数据库连接池&#xff1a; 建立数…

ChatGLM-6B 部署与使用——打造你的专属GLM

ChatGLM-6B 部署与使用指南 ChatGLM-6B 是清华大学与智谱 AI 开源的一款对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;参数达到 62 亿&#xff0c;因其卓越的语言理解与生成能力&#xff0c;受到广泛关注。 一、在 DAMODEL 上部署 ChatGLM-6B…

基于单片机巡迹避障智能小车系统

文章目录 前言资料获取设计介绍设计程序具体实现截图设计获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们…

RPA + 计算机视觉

随着超自动化成为顶级企业技术趋势之一&#xff0c;领先的机器人流程自动化 (RPA) 公司开始将人工智能功能集成到其自动化工具中&#xff0c;以创建能够自动化端到端流程并做出决策的智能机器人。计算机视觉是新一代 RPA 工具的关键 AI 功能之一。 在本文中&#xff0c;我们将…

2024年CSP-J认证 CCF信息学奥赛C++ 中小学初级组 第一轮真题-选择题解析

2024年 中小学信息学奥赛CSP-J真题解析 1、32 位 int 类型的存储范围是 A、 -2147483647 ~ 2147483647 B、 -2147483647 ~ 2147483648 C、 -2147483648 ~ 2147483647 D、 -2147483648 ~ 2147483648 答案&#xff1a;C 考点分析&#xff1a;主要考查小朋友们数据类型的存储…

Centos/fedora/openEuler 终端中文显示配置

注意&#xff1a;这里主要解决的是图形界面、远程登录界面的中文乱码问题 系统原生的终端&#xff08;如虚拟机系统显示的终端&#xff09;&#xff0c;由于使用的是十分原始的 TTY 终端&#xff0c;使用点阵字体进行显示&#xff0c;点阵字体不支持中文&#xff0c;因此无法显…