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表格过滤内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3+elementplus 树节点过滤功能实现

vue中touch和click共存的解决方式
这篇文章主要介绍了vue中touch和click共存的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue引入Excel表格插件的方法
这篇文章主要为大家详细介绍了vue引入Excel表格插件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
el-table 选择框根据条件设置某项不可选中的操作代码
这篇文章主要介绍了el-table 选择框根据条件设置某项不可选中的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
详解vue中使用protobuf踩坑记
这篇文章主要介绍了vue中使用protobuf踩坑记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue中引入swiper报错的问题及解决
这篇文章主要介绍了Vue中引入swiper报错的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue使用vue-area-linkage实现地址三级联动效果的示例
很多时候我们需要使用地址三级联动，即省市区三级联动，这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例，感兴趣的小伙伴们可以参考一下
2018-06-06
vue和小程序项目中使用iconfont的方法
这篇文章主要介绍了vue中和小程序中使用iconfont的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
vue3接口数据赋值对象,渲染报错问题及解决
这篇文章主要介绍了vue3接口数据赋值对象,渲染报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
如何解决element-ui中多个table在tab切换时出现宽度缩小问题
这篇文章主要介绍了如何解决element-ui中多个table在tab切换时出现宽度缩小问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue3使用vuex实现页面实时更新数据实例教程(setup)
在前端开发中往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示,这篇文章主要给大家介绍了关于vue3使用vuex实现页面实时更新数据(setup)的相关资料,需要的朋友可以参考下
2022-09-09

vue3中element-plus表格搜索过滤数据

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具