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"

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