循环遍历的el-select，实现el-option对应选中，获取每个下拉框选中的内容

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

 

首先想到的办法就是能不能让每个下拉框的v-model变得不一样，也就是说能不能让v-model绑定的数据变成动态的？

我也就是按照这个思路做的

运行结果：

代码：

方法一：

这是在对话框的表单里面写的，所以是先循环el-form-item，testList就是下拉框左边的文字，下拉框的个数就是根据testList的个数生成的，这里的数据是我手动写的，现实中的数据都是后台获取的。

将el-select的绑定数据用成item.order，这样就是动态的了，就不会触发一个下拉框导致其他的也被触发，value-key不能忘记，如果不加的话，当两个下拉框选的内容一样的时候就会控制台就会报红。

@change是下拉框选择的内容发生改变就会触发的事件，传的参数为index和item

el-option的就是正常的遍历数组

<el-form>
<el-form-item v-for="(item,index) in testList" :key="index">
   <span class="printValTitle">{{ item.value }}：</span>
   <span>
    <el-select v-model="item.order" value-key="item.order" @change="getChange(index,item)" >
        <el-option v-for="val in testOption" :key="val.order" :value="val.value" :label="val.value" />
    </el-select>
   </span>
</el-form-item>
</el-form>

这是模拟的数据： 

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

在methods里面添加方法：

printerSelect是在data里面定义的一个空数组，用来存放每个下拉框选的内容，想知道获取到的有哪些内容的话，可以在控制台打印看看 

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

      // console.log(this.printerSelect);
      
    }

 这是对话框的确定按钮的点击事件，前面说了这是在对话框里面写的，所以我在点击确定按钮的时候将获取到的整个数组打印出来

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

这就是打印出来数据的格式 

方法二： 

 使用key的方法，selData需在data定义为数组：selData: []

<el-form>
      <el-form-item v-for="(item,index) in testList" :key="index">
        <span class="printValTitle">{{ item.value }}：</span>
        <span>
          <el-select v-model="selData[item.order]" @change="getChange(item.order,item)" >
              <el-option v-for="val in testOption" :key="val.order" :value="val.value" :label="val.value" />
          </el-select>
        </span>
      </el-form-item>
    </el-form>

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

selData打印出来是数组，通过key也就是order可以取到每个下拉框选中的内容