先上效果图------支持显示搜索历史
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);
});
}