1 <template> 2 <div class="artcle"> 4 <el-form 5 label-width="100px" 6 :model="testForm"> 7 <el-form-item 8 v-for="(vtem, index) in testForm.version" ...
1 <template> 2 <div class="artcle"> 4 <el-form 5 label-width="100px" 6 :model="testForm"> 7 <el-form-item 8 v-for="(vtem, index) in testForm.version" 9 :key="index" 10 label="命令版本"> 11 <el-select 12 @change="comChange" 13 v-model="vtem.ver"> 14 <el-option 15 v-for="item in versionList" 16 :key="item.id" 17 :value="item.id" 18 :disabled="item.id == vtem.ver || selectedArr.includes(item.id)" 19 :label="item.name"> 20 </el-option> 21 </el-select> 22 <el-button 23 icon="el-icon-circle-plus-outline" 24 size="small" 25 @click="add(index)" 26 circle></el-button> 27 <el-button 28 icon="el-icon-remove-outline" 29 size="small" 30 @click="remove(index)" 31 :disabled="index === 0" 32 circle></el-button> 33 </el-form-item> 34 <el-form-item 35 label="測試輸入框"> 36 <el-input 37 v-model="testForm.input"></el-input> 38 </el-form-item> 39 </el-form> 40 </div> 41 </template>
1 export default { 2 name: 'home', 3 data () { 4 return { 5 selectedArr: [], // 作為判斷是否重覆的數組 6 testForm: { 7 version: [ 8 { ver: '' } 9 ], 10 input: '' 11 }, 12 versionList: [ 13 { id: 1, name: '1.1' }, 14 { id: 2, name: '1.2' }, 15 { id: 3, name: '1.3' } 16 ] 17 } 18 }, 19 methods: { 20 add () { 21 let version = this.testForm.version 22 if (version.length < this.versionList.length) { 23 this.testForm.version.push({ 24 ver: '' 25 }) 26 } else { 27 alert('命令版本就三條') 28 } 29 }, 30 remove (index) { 31 this.selectedArr.splice(index, 1) 32 this.testForm.version.splice(index, 1) 33 }, 34 // 下拉改變時 35 comChange (index) { 36 this.selectedArr = [] 37 for (let item of this.testForm.version) { 38 if (item.ver) { 39 this.selectedArr.push(item.ver) 40 } 41 } 42 } 43 } 44 }