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