Avue でカスタム検索バーを実装し、検索イベントをクリアする実践

<テンプレート スロット スコープ="スコープ" スロット="検索">
                  <el-form ref="form" :model="searchForm" style="width: 830px;margin-left: -10px; display: inline-block;" label-width="100px">
                    <el-行>
                      <el-form-item label="件名:">
                        <el-input v-model="searchForm.xxbt" style="width: 238px;margin-left: -100px" @change="getList()"></el-input>
                      </el-form-item>
                      <el-form-item label="送信者:">
                        <エルカスケーダー
                          v-model="fsrid"
                          :options="オプション"
                          クリア可能
                          スタイル="幅: 242px !important;左マージン: -100px"
                          :props="{ expandTrigger: 'hover' }"
                          @change="getList()"></el-cascader>
                      </el-form-item>
                    </el-row>
                    <el-row v-show="続きを表示">
                      <el-form-item label="送信時間:">
                        <el-日付ピッカー
                          スタイル="幅: 238px !重要; 左余白: -100px"
                          v-model="timeSlot"
                          タイプ="日付範囲"
                          align="right"
                          パネルのリンクを解除
                          フォーマット="yyyy-MM-dd HH:mm:ss"
                          値の形式="yyyy-MM-dd HH:mm:ss"
                          範囲区切り文字="to"
                          start-placeholder="開始日"
                          end-placeholder="終了日"
                          :picker-options="ピッカーオプション"
                          @change="getList()">
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="メソッド:" >
                        <el-radio-group v-model="searchForm.fsfs" size="small" style="margin-left: -100px" @change="getList()">
                          <el-radio-button label="4">システムメッセージ</el-radio-button>
                          <el-radio-button label="1">モバイル SMS</el-radio-button>
                          <el-radio-button label="3">WeChat 経由で送信</el-radio-button>
                        </el-ラジオグループ>
                      </el-form-item>
                    </el-row>
                    <el-row v-show="続きを表示">
                      <el-form-item label="読み取りステータス:">
                        <el-radio-group v-model="sfyd" size="small" style="margin-left: -100px;width: 238px" @change="getList()">
                          <el-radio-button label="2">すべて</el-radio-button>
                          <el-radio-button label="1">読む</el-radio-button>
                          <el-radio-button label="0">未読</el-radio-button>
                        </el-ラジオグループ>
                      </el-form-item>
                      <el-form-item label="ToDo に転送:">
                        <el-radio-group v-model="チェックリスト" スタイル="margin-left: -100px" @change="getList()">
                          <el-radio-button label="1">はい</el-radio-button>
                          <el-radio-button label="0">いいえ</el-radio-button>
                        </el-ラジオグループ>
                      </el-form-item>
                    </el-row>
                  </el-form>
                </テンプレート>

getList(ページ、パラメータ) {
              this.tableData = []
                if (this.timeSlot && this.timeSlot.length == 2){//送信時間 this.searchForm.startTime = this.timeSlot[0].replace(/\+/g, ' ')
                  this.searchForm.endTime = this.timeSlot[1].replace(/\+/g, ' ')
                }それ以外 {
                  this.searchForm.startTime を削除します
                  this.searchForm.endTime を削除します
                }
                if (this.fsrid.length){//送信者 this.searchForm.fsrid = this.fsrid[this.fsrid.length-1]
                }それ以外 {
                  this.searchForm.fsrid を削除します
                }
                if (this.sfyd.length>0){//ToDoに転送するかどうか if (this.sfyd== 1){
                    this.searchForm.sfyd = 1
                  }それ以外の場合 (this.sfyd == 0){
                    this.searchForm.sfyd = 0
                  }それ以外 {
                    this.searchForm.sfyd を削除します
                  }
                }それ以外 {
                  this.searchForm.sfyd を削除します
                }
                if (this.checkList!=''){//ToDoに転送するかどうか if (this.checkList== '1'){
                    this.searchForm.sfdb = 1
                  }それ以外 {
                    this.searchForm.sfdb = 0
                  }
                }それ以外 {
                  this.searchForm.sfdb を削除します
                }
                ページの場合
                  ページ = this.page
                }
                this.tableLoading = true
                fetchList(オブジェクト.assign({
                    現在の: page.currentPage、
                    サイズ: page.pageSize
                }, パラメータ、this.searchForm )).then(response => {
                  for(var i=0;i<response.data.data.records.length;i++){
                    レスポンス.データ.データ.レコード[i].チェックボックス=[]
                    if(response.data.data.records[i].sfyd==0){
                      response.data.data.records[i].checkbox.push('未読')
                    }それ以外{
                      レスポンス.data.data.records[i].checkbox.push('read')
                    }
                    if(response.data.data.records[i].sfdb==1){
                      response.data.data.records[i].checkbox.push('実行予定')
                    }
                    if(response.data.data.records[i].sfsc==1){
                      response.data.data.records[i].checkbox.push('コレクション')
                    }
                    if(response.data.data.records[i].sfhf==1){
                      response.data.data.records[i].checkbox.push('返信しました')
                    }
                    if(response.data.data.records[i].xxfjmc){
                      レスポンス.データ.データ.レコード[i].xxfjmc=レスポンス.データ.データ.レコード[i].xxfjmc.split(',')
                    }それ以外{
                      レスポンス.データ.データ.レコード[i].xxfjmc=[]
                    }
                    this.tableData.push(レスポンスデータ.データ.レコード[i])
                  }
                    this.page.total = レスポンスデータデータ合計
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },

<テンプレート スロット スコープ="スコープ" スロット="検索メニュー">
                  <el-button v-if="moreshow" type="success" class="el-button--small" icon="el-icon-caret-top" @click="getmoreshow(1)">非表示</el-button>
                  <el-button v-else class="el-button--small" icon="el-icon-caret-bottom" @click="getmoreshow(2)">もっと見る</el-button>
                </テンプレート>

getmoreshow(タイプ){
            if(type==1){
              this.moreshow=false
            }それ以外{
              this.moreshow=true
            }
          },

//検索クリアボタンイベント searchReset(){
              this.searchForm = {}
              this.searchForm.sfyd = ''
              if (this.searchForm.sfyd!=''){//ToDoに転送するかどうか if (this.searchForm.sfyd== '1'){
                  this.searchForm.sfyd = 1
                }それ以外 {
                  this.searchForm.sfyd = 0
                }
              }それ以外 {
                this.searchForm.sfyd を削除します
              }
              this.fsrid = []
              this.timeSlot = []
              this.checkList = ''
              this.sfyd = ''
              this.$refs.crud.toggleSelection();
              this.getList(このページ);
            },