javascript - Le sélecteur dans l'interface utilisateur de Vue+Element affiche toujours la valeur initiale et n'affiche pas la valeur d'espace réservé

Question

Utilisez vue avec l'élément UI comme zone de requête. En raison de la liaison de données bidirectionnelle, select affiche toujours directement la valeur initialisée lors de l'initialisation sans afficher la valeur dans l'espace réservé, comme le montre la figure :

Mais le backend interroge par défaut tout sans paramètres. Si vous remplacez toutes les valeurs par d'autres valeurs, la requête ne produira pas de données, ce qui est embarrassant ! !
Veuillez demander à Dieu de le résoudre !

<p class="search-area m-t-md">
          <p class="header clearfix">
            <h3 class="text">仓库管理</h3>
            <span class="btn-text" @click="modalShow = true"><i class="icon-plus"></i>添加仓库</span>
          </p>
          <p class="inner">
            <el-input v-model="searchInfo.houseCode"  placeholder="请输入仓库编码或名称"></el-input>
            <el-select v-model="searchInfo.houseType"  placeholder="请选择仓库类型">
              <el-option value="" label="全部"></el-option>
              <el-option value="1" label="总店"></el-option>
              <el-option value="2" label="门店"></el-option>
            </el-select>
            <el-select v-model="searchInfo.storeNo"  placeholder="请选择所属门店">
              <el-option value="" label="全部"></el-option>
              <el-option v-for="store in storeLists" :key="store.storeNo" :value="store.storeNo" :label="store.storeName"></el-option>
            </el-select>
            <el-button type="primary" @click="getDepotLists">查询</el-button>
          </p>
        </p>
        
        <script type="text/ecmascript-6">
  import {mapState} from 'vuex'
    export default {
        name: 'depot',
        data () {
            return {
               
                searchInfo:{
                  method:'cn.linkea.mshop.houseFacade.findPageList',
                  chainCode:'',
                  createOperator:'',
                  houseCode:'',
                  houseName:'',
                  houseType:'',
                  pageIndex:'1',
                  pageSize:'10',
                  storeManager:'',
                  storeName:'',
                  storeNo:'',
                  updateOperator:''
                }
                
            }
        }
        

    }
</script>

Answer 1

Vous pouvez le faire

<el-option value="all_list" label="all"></el-option>

<script>

if ( this.searchInfo.houseType === 'all_list' ) {
    this.searchInfo.houseType='';
}

</script>

Avis personnel, pour référence

Answer 2

La première méthode
searchInfo.houseTypeLa valeur initiale est définie sur nullsearchInfo.houseType初始值设置null
第二种方法
<el-option value="-1" label="全部"></el-option>或者<el-option value="-1" label="全部"></el-option>La deuxième méthode
<el-option value="-1" label="All">< / el-option>ou <el-option value="-1" label="All"></el-option>

Lors de l'envoi de la demande, manuellement Le la valeur de -1 ou 0 est omise ! 🎜