一、實現的效果

jobName下拉框選擇任意一個后，jobId同步變成對應的值

二、實現

2.1、數據結構

 1 jenkinsList : [
 2     {
 3         "id":10,
 4         "dictType":1,
 5         "dictValue":"小程序1",
 6         "extra":0,
 7         "isDelete":0
 8     },
 9     {
10         "id":4,
11         "dictType":1,
12         "dictValue":"課程中心相關流程接口",
13         "extra":0,
14         "isDelete":0
15     },
16     {
17         "id":3,
18         "dictType":1,
19         "dictValue":"小程序",
20         "extra":0,
21         "isDelete":0
22     },
23     {
24         "id":2,
25         "dictType":1,
26         "dictValue":"研發大師",
27         "extra":0,
28         "isDelete":0
29     },
30     {
31         "id":1,
32         "dictType":1,
33         "dictValue":"app接口回歸測試",
34         "extra":0,
35         "isDelete":0
36     }
37 ]

2.2、h5代碼

 1 <!-- 添加項目的對話框 -->
 2 <el-dialog :visible.sync="addProjectVisible" width="30%" title="添加項目">
 3   <el-form :model="projectForm" :rules="projectFormRules" ref="projectForm" label-width="150px">
 4     <el-form-item label="項目名稱" prop="projectName">
 5       <el-input placeholder="請輸入項目" v-model="projectForm.projectName"></el-input>
 6     </el-form-item>
 7     <el-form-item label="jobName" prop="jobName">
 8       <el-select v-model="projectForm.jobName" placeholder="請選擇" @change="selectJenkins">
 9         <el-option
10           v-for="item in jenkinsList"
11           :label="item.dictValue"
12           :value="item.dictValue">
13         </el-option>
14       </el-select>
15     </el-form-item>
16     <el-form-item label="jobId" prop="jobId">
17       <el-input placeholder="JenkinsId" v-model="projectForm.jobId" disabled></el-input>
18     </el-form-item>
19     <el-form-item label="環境id" prop="envId">
20       <el-input placeholder="環境id" v-model="projectForm.envId" disabled></el-input>
21     </el-form-item>
22   </el-form>
23 </el-dialog>

2.3、js代碼

1 // 選擇某一個jenkins項目
2 selectJenkins(){
3   console.log('jenkinsList',this.jenkinsList)
4   const item = this.jenkinsList.find(item1=> item1.dictValue === this.projectForm.jobName)
5   console.log(item)
6   this.projectForm.jobId = item.id
7   this.projectForm.envId = item.extra
8 
9 },

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery根據下拉框選擇的值顯示輸入框 EasyUI：combotree(樹形下拉框)復選框選中父節點(子節點的狀態也全部選中)輸入框中只顯示父節點的文本值 vue表單修改值后頁面輸入框中的沒有更新（表單的強制刷新） element下拉框選擇值不更新問題獲取select下拉框選中的的值如何獲取select下拉框選中的的值呢 vue動態生成下拉框，輸入框值通過model雙向綁定獲取 jquery怎么根據后台傳過來的值動態設置下拉框、單選框選中如何獲取select下拉框中option選中的文本值 js獲取select下拉框選中的值