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、应用效果

相关推荐
万少5 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL11 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0226 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang28 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景30 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼30 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿32 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再35 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55539 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录44 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css