先上效果圖------支持顯示搜索歷史
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");
},