先上效果图------支持显示搜索历史
html部分
搜索历史页签
<div class="searchHistory">
<span>已搜：</span>
<template v-for="(tag) in tags">
<a-tag :key="tag" closable @close="() => handleClose(tag)">{{ tag }}</a-tag>
</template>
<template v-for="(tag) in tagsCheck">
<a-tag :key="tag" @close="() => handleClose2(tag)">{{ tag }}</a-tag>
</template>
</div>
多选框
<div v-for="(item,index) in options" :key="index">
<a-row>
<a-col :span="3">
<div style>{{item.label}}</div>
</a-col>
<a-col :span="21">
<a-checkbox-group
style
name="checkboxgroup"
:options="item.children"
v-model="tagsValue[index]"
@change="onChange"
></a-checkbox-group>
</a-col>
</a-row>
<a-divider />
</div>
js
options: [
{
label: "任务类型:",
children: [
{ label: "科研类", value: "科研类" },
{ label: "订购类", value: "订购类" },
{ label: "维修类", value: "维修类" },
{ label: "建设类", value: "建设类" },
{ label: "其他", value: "其他" }
]
},
{
label: "主管业务部门:",
children: [
{ label: "综合计划局", value: "综合计划局" },
{ label: "信息系统局", value: "信息系统局" },
{ label: "科研订购局", value: "科研订购局" },
{ label: "试验鉴定局", value: "试验鉴定局" }
]
},
]
onChange(val) {
// this.tagsCheck = this.tagsValue.reduce(function(a, b) {
// // return a.concat(b);
// });
let arr = []
let searchCheckList = this.checkList
this.tagsValue.forEach((item,index)=>{
item.forEach((i)=>{
arr.push({
[searchCheckList[index].label]:i
})
arr.forEach((item,index)=>{
arr[index] = this.removeBlock(JSON.stringify(item).split('"').join('').replace(":","："))
})
this.tagsCheck = arr
this.page = 1
this.size = 10
this.current = 1
this.fetchList(this.inputValue, this.tagsValue, {});
}
handleClose2(removedTag) {
const tags = this.tagsValue.filter(tag => tag !== removedTag);
console.log(tags, "tags");
console.log(removedTag, "removedTag");
this.tagsValue.forEach(item => {
item.forEach((q, index) => {
if (q == removedTag.split("：")[1]) {
item.splice(index, 1);
}
});
});
this.onChange();
this.current = 1
console.log(this.tagsCheck, "tagsCheck");
},