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 }