elementui- Select selector-case: need to pass the corresponding name and id after selecting multiple drop-down lists in the v-for loop

elementui- Select selector-case: After selecting multiple drop-down lists in the v-for loop, it is necessary to pass the corresponding name and id and the application of form validation

Multiple drop-down boxes in the scene are obtained by v-for loop, and the drop-down box options are also obtained by loop

structure code

		<el-form-item label="商品名称及数量">
          <el-row
            v-for="(item, index) in form.baseProList"
            :key="index"
          >
            <el-form-item
               :prop="`baseProList.${index}.baseProdId`"
               :rules="ruleForm.baseProdId"
             >
                <el-select
                  v-model="item.baseProdId"
                  class="selectStyle"
                  placeholder="请选择商品名称"
                  value-key="id"
                  @change="selectChanged"
                >
                  <el-option
                    v-for="opt in nameList"
                    :key="opt.id"
                    :label="opt.name"
                    :value="opt.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="leftM" :span="12">
              <el-col :span="12">
                <el-form-item
                  :prop="`baseProList.${index}.quantity`"
                  :rules="ruleForm.quantity"
                >
                  <el-input
                    v-model.trim="item.quantity"
                    class="pickipt"
                    placeholder="请输入商品数量"
                    :min="1"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-button class="btnAdd" @click="addRow">➕</el-button>
                <el-button v-show="form.baseProList.length !== 1" class="btnMinus" @click="delRow(index, item.baseProdName)">➖</el-button>
              </el-col>
            </el-col>
          </el-row>
        </el-form-item>

Script code
The two-way binding has already got the id, just get the name corresponding to the id, here we use the find method to bind the corresponding name

data() {
    
    
    return {
    
    
        baseProList: [ // 商品信息
          {
    
    
            baseProdId: null, // 商品id
            baseProdName: '', // 商品名称
            quantity: '' // 商品数量
          }
        ],
        nameList: []  // 下拉框选项的数据, 通过接口获取, 里面形式如下
        // [{name: 'lihua', id: 1}, {name: 'zs', id: 2}
methods: {
    
    
	selectChanged(id) {
    
     // 双向绑定了id, 已经拿到了id, 只要再拿到id对应的名字即可, 这里用了find的方法进行绑定对应的名字
	      this.form.baseProList.find(item => item.baseProdId === id).baseProdName = this.nameList.find(item => item.id === id).name
    },
}