深圳建外贸网站,公司网站模板设计,网页图片转换成pdf文件,机房建设 网站前言#xff1a;
本文代码使用vue2element UI。
输入框搜索的功能#xff0c;可以在前端通过计算属性过滤实现#xff0c;也可以调用后端写好的接口。本文介绍的是通过计算属性对表格数据实时过滤#xff0c;后附完整代码#xff0c;代码中提供的是死数据#xff0c;可…前言
本文代码使用vue2element UI。
输入框搜索的功能可以在前端通过计算属性过滤实现也可以调用后端写好的接口。本文介绍的是通过计算属性对表格数据实时过滤后附完整代码代码中提供的是死数据可供学习使用。
效果展示 完整代码 templatediv classcontainerh1 classpage-title兴奋剂系统数据展示/h1!-- 搜索框 --el-inputv-modelsearchTermplaceholder搜索单位、姓名或身份证号prefix-iconel-icon-searchclearableclasssearch-input/el-input!-- 数据表格 --el-table :datafilteredData borderel-table-column propunit label单位 width150/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propidNumber label身份证号/el-table-column/el-table!-- 没有数据时显示 --div v-iffilteredData.length 0 classempty-message没有找到匹配的结果/div/div
/templatescript
export default {data() {return {searchTerm: ,mockImportedData: [{ unit: 北京队, name: 张三, idNumber: 110101199001011234 },{ unit: 上海队, name: 李四, idNumber: 310101199203033456 },{ unit: 广州队, name: 王五, idNumber: 440101199405055678 },{ unit: 深圳队, name: 赵六, idNumber: 440301199607077890 },{ unit: 北京队, name: 刘七, idNumber: 110101199809099012 },],};},computed: {filteredData() {const lowercasedSearch this.searchTerm.toLowerCase();return this.mockImportedData.filter((item) item.unit.toLowerCase().includes(lowercasedSearch) ||item.name.toLowerCase().includes(lowercasedSearch) ||item.idNumber.includes(this.searchTerm));},},
};
/scriptstyle langscss scoped
/* 容器整体样式 */
.container {padding: 15px;.page-title {font-size: 24px;font-weight: bold;margin: 5px 0;}.search-input {padding: 10px 0;margin-bottom: 10px;}/* 表格容器样式 */.table-wrapper {margin-top: 20px;}/* 空结果提示 */.empty-message {text-align: center;margin-top: 20px;color: #a0aec0;}
}
/style知识点 1. 数组的filter()方法 上述代码中filter() 方法会遍历 mockImportedData 中的每个数据项对每一项执行回调函数进行判断满足以下任意一个条件,才会保留在数组中。 2.空字符串匹配逻辑 在 JavaScript 中任何字符串调用 .includes() 都会返回 true。 这意味着空字符串会被视为“包含在任何字符串中”。 所以①当用户不输入任何数据即searchTerm为空时filter()返回原始的mockImportedData数组即不做任何筛选返回全部数据 ②当用户输入数据时则进行匹配过滤。
