成都网站优化费用,济宁网站建设优化亿峰,网站运营开发托管,阿里云这么建设网站实现背景
因为后端实现人员列表返回#xff0c;每次返回的数据量在100以内#xff0c;要求前端自己进行模糊搜索
页面实现 因为是实时更新数据的#xff0c;就不需要搜索和重置按钮了
代码
HTML el-dialogtitle团队人员详情:visible.synccenterDi…实现背景
因为后端实现人员列表返回每次返回的数据量在100以内要求前端自己进行模糊搜索
页面实现 因为是实时更新数据的就不需要搜索和重置按钮了
代码
HTML el-dialogtitle团队人员详情:visible.synccenterDialogVisiblewidth30%center:close-on-click-modalfalseel-row :gutter20el-col :span10el-input v-modelkeyword placeholder请输入姓名或身份证查询/el-input/el-col/el-rowel-table :datafilteredItems height350el-table-column propertyname label姓名 aligncenter/el-table-columnel-table-column propertyidCard label身份证 aligncenter/el-table- column/el-tablespan slotfooter classdialog-footerel-button typeprimary clickcenterDialogVisible false确 定/el-button/span/el-dialog
js // 计算属性computed: {filteredItems() {// if (!this.keyword) {// return this.userList// }return this.userList.filter(item {return item.idCard.includes(this.keyword) || item.name.includes(this.keyword)});}},
效果 注意点1我在data中定义keyword时候第一次使用的是默认值 undefined 导致includes出来的结果是空。
注意点2我在返回数据中定义的身份证号是number类型在计算时候直接报错为类型错误不能使用includes函数。需要转换为字符串类型
computed的实现方式很简洁主要借助一个计算属性在计算属性中通过搜索关键词过滤原始列表数据得到新的数据列表并将新数据列表渲染到页面。
值得注意的地方 abc.indexOf(a)的返回值是0而abc.indexOf()的返回值也是0。
因此在一开始没有输入任何数据的时候计算属性列表filterFruitList中经过计算得到的数据和原始列表数据fruitList是一样的。 这里最重要的是没有对原来的数据进行修改和删除 也可以使用watch监听数据变化 GPT提供的方法
在Vue2中你可以按照以下步骤实现后端返回的带有姓名和身份证信息的List进行展示并添加静态模糊搜索和搜索重置功能。
首先在Vue组件中定义需要的数据变量
data() {return {userList: [], // 存储后端返回的列表数据keyword: , // 存储搜索关键字filteredList: [] // 存储搜索结果数据};
}
然后使用生命周期钩子函数 mounted() 在组件加载时获取后端数据
mounted() {// 调用后端API获取数据示例yourApi.getUserList().then(response {this.userList response.data;});
}
在模板中你可以使用一个输入框和一个搜索按钮以及一个重置按钮
input typetext v-modelkeyword placeholder请输入搜索关键字
button clicksearch搜索/button
button clickreset重置/button
接下来在Vue组件中实现静态模糊搜索和搜索重置功能的两个方法
methods: {search() {if (this.keyword.trim() ) {this.filteredList this.userList;} else {const keywordLowerCase this.keyword.toLowerCase();this.filteredList this.userList.filter(user {const nameMatch user.name.toLowerCase().includes(keywordLowerCase);const idCardMatch user.idCard.toLowerCase().includes(keywordLowerCase);return nameMatch || idCardMatch;});}},reset() {this.keyword ;this.filteredList this.userList;}
}
在 search 方法中首先判断关键字是否为空如果为空则直接将 filteredList 设置为原始列表数据 userList否则根据关键字对 userList 进行静态模糊搜索并将结果赋值给 filteredList。
在 reset 方法中将关键字重置为空字符串并将 filteredList 设置为原始列表数据 userList。
最后在模板中使用 v-for 遍历 filteredList展示搜索结果
ulli v-foruser in filteredList :keyuser.id{{ user.name }} - {{ user.idCard }}/li
/ul
综上所述你可以按照以上步骤使用Vue2实现后端返回的列表数据的展示并添加静态模糊搜索和搜索重置功能。
