handleQueryitem consolelogitem item; if thissearchvalue return thisvoucherGroupListfilteritem = 根据抽样模板编码或名称进行过滤 return itemvouche
下面是使用Vue实现搜索功能的完整代码:
<template>
<div>
<el-input
v-show="showSearch"
v-model="queryParams.voucherGroupName"
placeholder="输入抽样模板编码或名称"
clearable
size="small"
@keyup.native.enter="handleQuery"
class="search-input"
style="width: 200px; margin-right: 10px"
/>
<div v-for="item in filteredVoucherGroupList" :key="item.voucherGroupId">
{{ item.voucherGroupId }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
queryParams: {
voucherGroupName: '',
},
voucherGroupList: [], // 抽样模板列表数据
};
},
computed: {
showSearch() {
return this.voucherGroupList.length > 0;
},
filteredVoucherGroupList() {
if (this.queryParams.voucherGroupName) {
return this.voucherGroupList.filter((item) => {
return (
item.voucherGroupId.includes(this.queryParams.voucherGroupName) ||
item.parentId.includes(this.queryParams.voucherGroupName)
);
});
} else {
return this.voucherGroupList;
}
},
},
methods: {
handleQuery() {
console.log(this.queryParams.voucherGroupName, "item");
if (!this.queryParams.voucherGroupName) {
return;
}
let param = {
keyValue: this.queryParams.voucherGroupName,
};
listVoucherGroup(param)
.then((res) => {
console.log(res, "response");
this.voucherGroupList = this.handleTree(
res.data,
"voucherGroupId",
"parentId"
);
})
.catch((error) => {
console.error(error);
});
// this.getList();
},
handleTree(data, idKey, parentIdKey) {
// 处理树形结构数据的方法
// ...
},
getList() {
// 获取抽样模板列表的方法
// ...
},
},
};
</script>
在上面的代码中,filteredVoucherGroupList是一个计算属性,根据queryParams.voucherGroupName对voucherGroupList进行过滤,返回过滤后的列表。
handleQuery方法在用户输入搜索内容后触发,根据输入的内容调用listVoucherGroup方法获取抽样模板列表数据,并将返回的数据处理为树形结构后赋值给voucherGroupList。
注意:由于缺少相关代码,handleTree和getList方法需要根据实际情况进行实现
原文地址: https://www.cveoy.top/t/topic/iQHB 著作权归作者所有。请勿转载和采集!