vue场景 无分页列表条件过滤,子组件多选来自父组件的列表

日常开发中,经常会遇到下面场景:

  1. 页面加载一个无分页列表,同时工具栏设置多个条件可对列表过滤的场景(典型的就是关键字模糊查询)
  2. 父组件传给子组件列表,子组件中需要多选列表多选,选择结果返回父组件

1 无分页列表过滤

思路:无分页列表是最简单的情况,列表直接绑定计算属性即可:

<template><div class="page-container"><el-input v-model="keyword" placeholder="请输入关键字"></el-input><div class="list" v-for="item in filteredList" :key="item.id"><span>{{ item.id }}</span><span>{{ item.name }}  </span><span>{{ item.status }}</span></div></div>
</template><script lang="ts" setup>
const keyword = ref('');
const list = ref([{id:1,name:'张三',status:'正常',},{id:2,name:'李四',status:'正常',}, {id:3,name:'王五',status:'休假',}, {id:4,name:'林六',status:'休假',}, {id:5,name:'徐七',status:'休假',}
]);
const filteredList = computed(()=>{return list.value.filter(item=>item.name.includes(keyword.value))
})</script>
<style lang="scss" scoped>
.page-container {width: 300px;height: 300px;.list{display: flex;span{+span{margin-left:20px;}}}
}
</style>

同理:多条件时,只是修改计算属性中的逻辑运算即可

<template><div class="page-container"><el-input v-model="keyword" placeholder="请输入关键字"></el-input><el-radio-group v-model="status"><el-radio :label="'全部'">全部</el-radio><el-radio :label="'正常'">正常</el-radio><el-radio :label="'休假'">休假</el-radio></el-radio-group><div class="list" v-for="item in filteredList" :key="item.id"><span>{{ item.id }}</span><span>{{ item.name }}  </span><span>{{ item.status }}</span></div></div>
</template><script lang="ts" setup>
const keyword = ref('');
const status=ref('正常')
const list = ref([{id:1,name:'张三',status:'正常',},{id:2,name:'李四',status:'正常',}, {id:3,name:'王五',status:'休假',}, {id:4,name:'林六',status:'休假',}, {id:5,name:'徐七',status:'休假',}, {id:6,name:'徐八',status:'正常',}
]);
const filteredList = computed(()=>{let baseCondition=item=>item.name.includes(keyword.value);let condition=baseCondition;if(status.value!=='全部'){condition=item=>baseCondition(item) && item.status===status.value}return list.value.filter(condition)
})</script>
<style lang="scss" scoped>
.page-container {width: 300px;height: 300px;.list{display: flex;span{+span{margin-left:20px;}}}
}
</style>

2 子组件中多选来自父组件的列表

思路:来自父组件的列表可以认为是无分页列表,先在子组件中复制一份,追加check属性,然后在list中绑定

不正确的处理(修改props)

1 在子组件中给props中的list追加check属性,绑定list

2 在父组件中给list追加check属性,子组件绑定list,这样点击checkbox依然会修改props

 


<template><div class="page-container"><el-input v-model="keyword" placeholder="请输入关键字"></el-input><el-radio-group v-model="status"><el-radio :label="'全部'">全部</el-radio><el-radio :label="'正常'">正常</el-radio><el-radio :label="'休假'">休假</el-radio></el-radio-group><div class="list" v-for="item in filteredList" :key="item.id"><el-checkbox v-model="item.check"> </el-checkbox><span>{{ item.id }} </span><span>{{ item.name }} </span><span>{{ item.status }} </span></div></div>
</template><script lang="ts" setup>
const keyword = ref("");
const status = ref("全部");
const props = defineProps({list: {type: Array,default: () => [{id: 1,name: "张三",status: "正常",},{id: 2,name: "李四",status: "正常",},{id: 3,name: "王五",status: "休假",},{id: 4,name: "林六",status: "休假",},{id: 5,name: "徐七",status: "休假",},{id: 6,name: "徐八",status: "正常",},],},
});const copyList = ref(props.list.map((item) => ({...item,check: false,}))
);const filteredList = computed(()=>{let baseCondition=item=>item.name.includes(keyword.value);let condition=baseCondition;if(status.value!=='全部'){condition=item=>baseCondition(item) && item.status===status.value}return copyList.value.filter(condition)
})watch(filteredList.value, (val, old) => {console.log("val", val.filter((item) => item.check).map((item) => item.id));emit("selectionChange",val.filter((item) => item.check).map((item) => item.id));
});const emit = defineEmits(["selectionChange"]);
</script>
<style lang="scss" scoped>
.page-container {width: 300px;height: 300px;.list {display: flex;.el-checkbox,span {+ span {margin-left: 20px;}}}
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

行业首台7英寸彩屏,掌阅iReader Color 7 发布

12月22日消息&#xff0c;掌阅iReader 继2021年发布 C6 Pro 后&#xff0c;时隔2年再次推出彩屏系列新产品 Color 7&#xff0c;该产品为彩色电子纸智能阅读本&#xff0c;采用 Kaleido3 新一代彩色电子纸技术&#xff0c;黑白像素密度为 300PPI &#xff0c;彩色像素密度为 15…

并发程序设计--D1进程的创建和回收

进程和程序内容区别 进程包含的内容&#xff1a; BSS段&#xff1a;存放程序中未初始化的全局变量 数据段&#xff1a;已初始化的全局变量 代码段&#xff1a;程序执行代码 堆&#xff08;heap&#xff09;&#xff1a;malloc等函数分配内存 栈(stack)&#xff1a;局部变量…

让学习成为一种生活方式:数字化助力终身学习

12月以来,“让学习成为一种生活方法”全民终身学习活动在北京、安徽、湖北、湖南、云南等地密集启动,而依托数字化赋能终身学习成为共同关键词。 近年来,随着教育现代化体系的不断深入推进,数字化转型成为建设高质量终身学习体系的重要“推动力”,数字技术与大数据的应用汇聚了…

2023新能源汽车,吵得越凶,卖得越多

作者 | 辰纹 来源 | 洞见新研社 2023年的汽车行业很残酷&#xff0c;合资大败退&#xff0c;市场份额被自主品牌大幅渗透&#xff0c;三菱退出中国市场&#xff0c;成为真实写照。 新能源车企&#xff0c;威马领头&#xff0c;天际、自游家NIUTRON、恒驰、爱驰、雷丁等造车新…

如何学习VBA_3.2.10:人机对话的实现

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的劳动效率&#xff0c;而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册&#xff0c;现在已经全部完成&#xff0c;希望大家利用、学习。 如果…

智能优化算法应用:基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.斑马算法4.实验参数设定5.算法结果6.参考文献7.MA…

算法导论复习(三)

这一次我们主要复习的是递归式求解 递归式求解主要有的是三种方法&#xff1a; 代换法递归树法主方法 我们进行处理的时候要 代换法 方法讲解 主要就是猜测答案的形式 我们只在乎 n 在无穷大的时候成立就行 关于答案的形式&#xff0c;我发现最后能够是 n log n 的形式的…

SUS-Chat-34B领先一步:高效双语AI模型的突破

引言 在人工智能领域&#xff0c;模型的规模和效能一直是衡量其先进性的关键指标。南方科技大学联合IDEA研究院CCNL团队最新开源的SUS-Chat-34B模型&#xff0c;以其340亿参数的庞大规模和卓越的双语处理能力&#xff0c;在AI界引起了广泛关注。 模型概述 SUS-Chat-34B是基于…

在VSCode中使用Git教程

文章目录 提交代码操作分支提交远程库拉取代码参考 介绍一下如何在VSCode中使用Git 首先在VSCode中打开一个项目 打开项目后, 点击下图按钮, 可以引入Git 提交代码 点击 &#xff1b;相当于git add. 下面两张图, 第一张表示改文件后的号, 只会add本文件. 第二张图表示这段时…

linux系统和网络(四):网络

本文主要探讨linux网络相关知识,详细介绍看本博客其他博文。 网络基础(参考本博客其他文章&#xff1a;基础网络知识&#xff0c;socket网络编程&#xff0c;基于socket的聊天室和简易ftp) 路由器是局域网和外部网络通信出入口 DNS实现域名和IP地址之间转换 …

Ai画板原理

在创建时画板可以选择数量和排列方式 也可以采用这个图片左上的画板工具&#xff0c;选择画板在其他地方画框即可生成&#xff0c;同时可以在属性框中可以修改尺寸大小 选择全部重新排列可以进行创建时的布局

uniapp创建/运行/发布项目

1、产生背景----跨平台应用框架 在移动端各大App盛行的时代&#xff0c;App之间的竞争也更加激烈&#xff0c;他们执着于让一个应用可以做多个事情 所以就应运而生了小程序&#xff0c;微信小程序、支付宝小程序、抖音小程序等等基于App本身的内嵌类程序。 但是各大App他不可…

VTK+QT配置(VS)

先根据vtk配置这个博客配置基本环境 然后把这个dll文件从VTK的designer目录复制到qt的对应目录里 记得这里是debug版本&#xff0c;你也可以配置release都一样的步骤&#xff0c;然后建立一个qt项目&#xff0c;接着配置包含目录&#xff0c;库目录&#xff0c;链接输入&…

智能优化算法应用:基于厨师算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于厨师算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于厨师算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.厨师算法4.实验参数设定5.算法结果6.参考文献7.MA…

Java中synchronized锁升级过程是什么样的

参考文章一 参考文章二 参考文章三 在Java中&#xff0c;对象锁的状态是为了减少同步操作的开销而设计的&#xff0c;主要包括无锁、偏向锁、轻量级锁和重量级锁几个级别。锁的状态会随着竞争情况的不同而升级&#xff0c;但是不会降级。以下是锁状态的一般升级过程&#xff1…

将mapper.xml保存为idea的文件模板

将mapper.xml保存为idea的文件模板 在idea的File and Code Templates中将需要使用模板的内容添加为模板文件。 那么接下来请看图&#xff0c;跟着步骤操作吧。 mapper.xml文件内容 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper P…

代码随想录算法训练营第二十七天|组合总和等

77 组合 1 描述 给定两个整数 n 和 k&#xff0c;返回 1 ... n 中所有可能的 k 个数的组合。 示例: 输入: n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 2 代码 class Solution:def combine(self, n: int, k: int) -> List[List[int]]:path []rst…

数据仓库【2】:架构

数据仓库【2】&#xff1a;架构 1、架构图2、ETL流程2.1、ETL -- Extract-Transform-Load2.1.1、数据抽取&#xff08;Extraction&#xff09;2.1.2、数据转换&#xff08;Transformation&#xff09;2.1.3、数据加载&#xff08; Loading &#xff09; 2.2、ETL工具2.2.1、结构…

宝塔面板Linux服务器CentOS 7数据库mysql5.6升级至5.7版本教程

近段时间很多会员问系统更新较慢&#xff0c;也打算上几个好的系统&#xff0c;但几个系统系统只支持MYSQL5.7版本&#xff0c;服务器一直使用较低的MYSQL5.6版本&#xff0c;为了测试几个最新的系统打算让5.6和5.7并存使用&#xff0c;参考了多个文档感觉这种并存问题会很多。…

AOSP源码下载方法,解决repo sync错误:android-13.0.0_r82

篇头 最近写文章&#xff0c;反复多次折腾AOSP代码&#xff0c;因通过网络repo sync aosp代码&#xff0c;能一次顺利下载的概率很低&#xff0c;以前就经常遇到&#xff0c;但从未总结&#xff0c;导致自己也要回头检索方法&#xff0c;所以觉得可以总结一下&#xff0c;涉及…