element ui中選擇元件el-select各種樣式和功能總結

el-select在工作中使用十分頻繁，現將各種樣式和功能記錄下來。

1. 輸入實時搜尋，輸入為空不顯示選項列表（適合資料項較多），可以不選中選項

             <el-select
                v-model="query.accountName"
                filterable
                remote
                reserve-keyword
                clearable
                placeholder="請輸入賬號名稱"
                :remote-method="queryAccountNameList" >
                <el-option
                  v-for="item in accountNameList"
                  :key="item.id"
                  :label="item.accountName"
                  :value="item.accountName"
                ></el-option>
              </el-select>

 

2.  輸入實時搜尋，輸入為空也顯示選項列表（適合資料項較少），必須選中選項 

               <el-select
                  v-model="ruleForm.province"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="請選擇或搜尋關鍵詞"
                >
                  <el-option
                    v-for="(item ,index ) in provinceArr"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>

 

 

 3.  輸入實時搜尋，輸入為空不顯示選項列表（適合資料項較多），必須選中選項 

     
               <el-select 
                    v-model="accountAdmin"
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    placeholder="請輸入erp或姓名"
                    :remote-method="queryErp"
              >
                <el-option
                  v-for="(item ,index ) in erpList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            

 

 

 

4. 下拉三角，只能選擇不能搜尋

             <el-select
                v-model="query.accountType"
                placeholder="請選擇"
                clearable
              >
                <el-option
                  v-for="(item,i) in accountTypeList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>