下拉框 javascript-循环通过el-select实现el-option对应的选择

el-select下拉框的数量是根据后台数据动态生成的，所以只写了一个el-select，而v-model也只有一个，而且el-option的选项是一样的，所以有会出现一个问题，当选择其中一个下拉框时，其他下拉框也会选择相同的数据。

首先想到的是是否可以让每个下拉框的v-model看起来都不一样，也就是说v-model绑定的数据能不能做成动态的？

我也按照这个思路做了

运行结果：

代码：

方法一：

这个是写在对话框的form上的，所以先循环el-form-item下拉框 javascript，testList就是下拉框右侧的文字。 根据testList的数量生成下拉框的数量。 这里的数据是我自动写的。 是的，实际数据是从后台获取的。

使用el-select的绑定数据为item.order，是动态的，不会触发下拉框引起其他触发。 value-key 不能被忘记。 如果不添加，则当两个下拉框选择的内容相同时，控制台会报红色。

@change是当下拉框中选择的内容发生变化时会触发的风暴。 传递的参数是index和item

el-option为普通遍历字段

   {{ item.value }}：
   
    
        
    
   

这是模拟数据：

      testList: [{
        value: '种植',
        order: 1
      }, {
        value: '收获',
        order: 2
      }, {
        value: '预售',
        order: 3
      }],
      testOption: [{
        value: '香蕉',
        order: '001'
      },{
        value: '玉米',
        order: '002'
      }, {
        value: '草莓',
        order: '003'
      }]

在方法上方添加方法：

PrinterSelect是上面data定义的一个空链表，用于存储各个下拉框的内容。 如果你想知道你得到了什么内容，你可以在控制台上复制它。

    // 获取打印内容下拉框的选择项,保存到数组
    getChange: function(i,item) {
      this.printerSelect[i] = item
      // console.log(this.printerSelect);
      
    }

这是单击对话框中的“确定”按钮。 正如我之前所说，它是写在对话框上的，因此当我单击“确定”按钮时，我复制了整个链接列表。

    doPrint: function() {
      console.log(this.printerSelect);
    },

这是复制数据的格式

方法二：

使用key方法下拉框 javascript，需要将selData定义为data中的链表：selData:[]

      
        {{ item.value }}：
        
          
              
          
        
      
    

getChange: function(order,item) {
      console.log('selData:', this.selData);
      console.log('单项orderItem:', this.selData[order]);
      
    }

复制出来的selData是一个链表，通过key可以获取各个下拉框选中的内容，就是顺序