@
目錄- 前言
- 一、ElementUI如何通過選擇的條件，進行公司(或產品等)的模糊查詢+下拉框選擇？
- 二、使用步驟
- 1.ElementUI代碼
- 下單倉庫、商品類別、開票單位都是通過select+option下拉框選擇，
- 1.1 其中商品類別是固定的，就直接通過typeOptions寫死選擇就行，
- 1.2 下單倉庫則通過方法getWarehousList()后臺實時獲取最新資料（具體見下面js代碼中）
- 1.3 而開票單位則將前面選擇好下單倉庫、商品類別作為引數，通過方法getCompanyIdList(filterParams.warehouseid,filterParams.type)后臺實時獲取，而且在輸入框模糊匹配（具體見下面js代碼中），
- 下單倉庫、商品類別、開票單位都是通過select+option下拉框選擇，
- 2.js代碼
- 1.ElementUI代碼
提示：本文僅供學習交流，請勿用于非法活動！
前言
本文大概內容：
例如：隨著elementui的廣泛應用，用戶的的操作越來越簡化，本文主要針對用戶下拉框選項需要請求后臺資料獲得，而且后面的下拉框選項需要在前面的多個條件選擇基礎上，再通過請求后態資料才能獲得，而期間用戶如何連一個提交操作都沒有就能獲得查詢條件？
一、ElementUI如何通過選擇的條件，進行公司(或產品等)的模糊查詢+下拉框選擇？
示例：如下圖，我們需要對下單倉庫、商品類別兩個條件選擇好的前提下，再進行開票單位（即供應商）的模糊查詢+下拉框選擇，
二、使用步驟
1.ElementUI代碼
代碼如下（示例）：
<el-form-item label="下單倉庫" prop="warehouseid">
<el-select size="mini" v-model="filterParams.warehouseid" clearable filterable>
<el-option v-for="warehousenameItem in warehousenameOptions" :key="warehousenameItem.id"
:label="warehousenameItem.warehouseName"
:value="https://www.cnblogs.com/folyh/p/warehousenameItem.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="商品類別" prop="type">
<el-select size="mini" v-model="filterParams.type" clearable filterable
@change="getCompanyIdList(filterParams.warehouseid,filterParams.type)" >
<el-option v-for="typeItem in typeOptions" :key="typeItem.id"
:label="typeItem.name" :value="https://www.cnblogs.com/folyh/p/typeItem.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="開票單位" prop="companyId">
<el-select size="mini" v-model="filterParams.companyId" clearable filterable
@focus="companyOnFocus()">
<el-option v-for="companyNameItem in companyIdOptions" :key="companyNameItem.id"
:label="companyNameItem.name" :value="https://www.cnblogs.com/folyh/p/companyNameItem.id"></el-option>
</el-select>
</el-form-item>
下單倉庫、商品類別、開票單位都是通過select+option下拉框選擇，
1.1 其中商品類別是固定的，就直接通過typeOptions寫死選擇就行，
typeOptions: [{
id: '0',
label: 'A類'
}, {
id: '1',
label: 'B類',
}]
1.2 下單倉庫則通過方法getWarehousList()后臺實時獲取最新資料（具體見下面js代碼中）
1.3 而開票單位則將前面選擇好下單倉庫、商品類別作為引數，通過方法getCompanyIdList(filterParams.warehouseid,filterParams.type)后臺實時獲取，而且在輸入框模糊匹配（具體見下面js代碼中），
2.js代碼
上述獲取下單倉庫、獲取開票單位代碼如下（示例）：
getWarehousList: function () {
// 獲取實體
var _this = this;
// 請求用戶下拉框選項資料
_this.doGetData(_this.getWarehousUrl, {}, function (r) {
_this.warehousenameOptions = r.data;
});
},
getCompanyIdList: function (warehouseid,type) {
// 獲取實體
var _this = this;
// 請求產品代碼下拉框選項資料
_this.doGetData(_this.getcompanyIdUrl, {warehouseId: warehouseid,type:type}, function (r) {
_this.companyIdOptions = r.data;
});
},
該處使用的url網路請求的資料，
隨心所往，看見未來，Follow your heart，see night！
歡迎點贊、關注、留言，一起學習、交流！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500130.html
標籤：JavaScript
上一篇：模擬Vue實作回應式資料