まずレンダリング---検索履歴の表示をサポート
HTMLセクション
検索履歴タブ
<div class = "searchHistory">
<span>検索：</ span>
<タグ内のテンプレートv-for = "（タグ）">
<a-tag：key = "tag" closable @close = "（）=> handleClose（tag）"> {{tag}} </ a-tag>
</テンプレート>
<tagsCheckのテンプレートv-for = "（tag）">
<a-tag：key = "tag" @close = "（）=> handleClose2（tag）"> {{tag}} </ a-tag>
</テンプレート>
</ div>
チェックボックス
<div v-for = "（item、index）in options"：key = "index">
<列>
<a-col：span = "3">
<div style> {{item.label}} </ div>
</ a-col>
<a-col：span = "21">
<a-checkbox-group
スタイル
name = "checkboxgroup"
：options = "item.children"
v-model = "tagsValue [インデックス]"
@ change = "onChange"
> </ a-checkbox-group>
</ a-col>
</ a-row>
<a-divider />
</ div>
js
オプション：[
{
ラベル： "タスクタイプ："、
子供達： [
{label： "Scientific research"、value： "Scientific research"}、
{label： "注文クラス"、値： "注文クラス"}、
{label： "Maintenance class"、value： "Maintenance class"}、
{label： "Construction"、value： "Construction"}、
{ラベル：「その他」、値：「その他」}
]
}、
{
ラベル：「有能なビジネス部門：」、
子供達： [
{label： "総合企画局"、value： "総合企画局"}、
{label： "情報システム局"、value： "情報システム局"}、
{label： "Scientific Research Ordering Bureau"、value： "Scientific Research Ordering Bureau"}、
{label： "Test and Evaluation Bureau"、value： "Test and Evaluation Bureau"}
]
}、
]
onChange（val）{
this.tagsCheck = this.tagsValue.reduce（function（a、b）{
a.concat（b）;を返します。
}）;
}