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

1、表格数据

javascript 复制代码
// 表格数据
import type { User } from "@/interface";
const tableData = ref<User[]>([]);

2、 表格搜索过滤数据

javascript 复制代码
// 搜索内容
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"

html 复制代码
<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、应用效果

相关推荐
Gazer_S5 分钟前
【React Context API 优化与性能实践指南】
前端·javascript·react.js
w4ngzhen11 分钟前
COME,轻量级自托管的站点评论系统套件
前端·javascript
掘金酱11 分钟前
🎆仲夏掘金赛:码上争锋,金石成川 | 8月金石计划
前端·人工智能·后端
wordbaby12 分钟前
CSS 环境变量 env() 与自定义变量 var() 全面解读及实用场景
前端·css
oil欧哟35 分钟前
🧐 我开发的 AI 文本纠错/润色工具 Text-Well 上线了~
前端·ai编程·next.js
Mintopia35 分钟前
网格布尔运算的三重奏:从像素的邂逅到模型的重生
前端·javascript·计算机图形学
Apifox36 分钟前
Apifox 7 月更新|通过 AI 命名参数及检测接口规范、在线文档支持自定义 CSS 和 JavaScript、鉴权能力升级
前端·后端·测试
Mintopia38 分钟前
用 Three.js 构建组件库:一场 3D 世界的 "乐高" 之旅
前端·javascript·three.js
十五_在努力39 分钟前
参透 JavaScript —— 彻底理解原型与原型链
前端·javascript
CodeSheep43 分钟前
这个老爷子研究的神奇算法,影响了全世界!
前端·后端·程序员