vue3中element-plus表格搜索过滤数据
更新时间：2025年03月26日 08:58:22 作者：BillKu
本文主要介绍了vue3中element-plus表格搜索过滤数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
1、表格数据
// 表格数据
import type { User } from "@/interface";
const tableData = ref<User[]>([]);2、 表格搜索过滤数据
// 搜索内容
const search = ref("");
// 表格过滤数据
const tableFilterData = computed(() =>
tableData.value.filter(
(data) => !search.value || data.moniker?.includes(search.value)
)
);
// 表格过滤数据，等价代码（分步拆解）
/*
const tableFilterData = computed(() => {
// 若 search 为空，直接返回原数组
if (search.value) return tableData.value;
// 否则过滤包含关键词的项
return tableData.value.filter((data) => {
// 安全访问 moniker，不存在则返回 undefined（过滤掉）
let moniker = data.moniker ?? "";
return moniker.includes(search.value);
});
});
*/3、表格引用搜索过滤数据，:data="tableFilterData"
<el-table
:data="tableFilterData"
<el-table-column type="selection" header-align="center" />
<el-table-column prop="moniker" label="人员">
<template #header>
<el-input v-model="search" :prefix-icon="Search">
<template #prepend>人员</template>
</el-input>
</template>
</el-table-column>
</el-table>4、应用效果
到此这篇关于vue3中element-plus表格搜索过滤数据的文章就介绍到这了,更多相关element-plus表格过滤内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
随着 Vue.js 在前端开发中的普及,如何高效地将 Vue 项目部署到生产环境成为了开发者关注的重点,本文将详细解析 Vue.js 生产环境文件的使用方法、优缺点以及优化策略,需要的朋友可以参考下2024-12-12
骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇修改vue+webpack run build的路径方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
VuePress为每一个由它生成的页面提供预加载的html，不仅加载速度极佳，同时对seo非常友好。这篇文章主要介绍了基于vue-ssr的静态网站生成器VuePress 初体验,需要的朋友可以参考下2018-04-04
vue在取对象长度length时候出现undefined的解决
这篇文章主要介绍了vue在取对象长度length时候出现undefined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
element-resize-detector监听普通元素的实现示例
当涉及到网页元素的实时尺寸变化监测时,element-resize-detector 是一个值得推荐的开源库,本文主要介绍了element-resize-detector监听普通元素的实现示例,感兴趣的可以了解一下2024-07-07
Vue是目前Web前端最流行的开发框架技术, 下面这篇文章主要给大家介绍了关于vue3组件化开发常用API的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
文章介绍了如何使用`el-table`组件和`render-header`属性自定义表头,并添加搜索功能,通过`Popover`组件和`Clickoutside`指令实现点击搜索区域外隐藏搜索框,解决了多个表头搜索框共存时的冲突问题,感兴趣的朋友一起看看吧2024-11-11
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件，这篇文章主要介绍了vue中@click绑定事件点击不生效的解决方案,需要的朋友可以参考下2022-12-12
给大家详细分析了vue.js之props传递参数的相关知识以及问题解决方法，需要的朋友参考下吧。2017-12-12
最新评论