elementui- Select 选择器-案例: 在v-for循环的多个下拉列表选择后需要传递对应的名字和id

elementui- Select 选择器-案例: 在v-for循环的多个下拉列表选择后需要传递对应的名字和id 及表单校验的应用

场景 多个下拉框由v-for循环得到, 下拉框选项也是通过循环得到

结构代码

		<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

script代码
双向绑定已经拿到了id, 只要再拿到id对应的名字即可, 这里用了find的方法进行绑定对应的名字

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
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16