利用for循环无限添加选择框

Posted 2021-05-21 派大星⊙∫⊙

https://img1.baidu.com/it/u=1099804814,2036941061&fm=26&fmt=auto&gp=0.jpg

今天在做需求的时候，需要增加一个列表的多个内容而且可以重复
类似：

琢磨了一会，想着先设置几个数组来存值：

syUserId: \'\',
syUserIds: \'\',//二级收样员
moreSyUserIds: [],  // 三级及其后续收样员

groupSyUserList: [{}],  // 收样员组件列-三级以及以后

再设置一个列，来包裹文字以及选择框也就是 groupSyUserList 我们就直接循环这个数组就可以了。
直接贴代码：

<el-form-item id="groupSyUser" label="二级收样员" prop="syUserIds">
          <el-select
            v-model="syUserIds"
            clearable
            reserve-keyword
            placeholder="请选择收样员">
            <el-option
              v-for="item in pickSyUserList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button 
              @click="addSubclass(groupSyUserList)" 
              icon="el-icon-circle-plus-outline"
              plain round type="success" size="mini"
              ></el-button>
        </el-form-item>

        <!-- 5.21 liusixiang 次级收样员 -->
        
        <el-form-item 
              label="三级收样员" prop="moreSyUserIds" id="groupSyUser" 
              v-for="(item,index) in groupSyUserList"
              :key="\'groupSyUserList\' + index">
          <el-select
            v-model="moreSyUserIds"
            clearable
            reserve-keyword
            placeholder="请选择收样员">
            <el-option
              v-for="item in pickSyUserList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
           <el-button 
              @click="delectSubclass(groupSyUserList,index)" 
              icon="el-icon-remove-outline"
              plain round type="danger" size="mini"
              ></el-button>
        </el-form-item> 

我用的是element-ui框架
然后，增加和删除：

  // 无限增加次级收样员
    addSubclass (list) {
      list.push({})
      console.log(groupSyUserList)
    },
    // 删除次级收样员
    delectSubclass (list,index) {
      list.splice(index,1)
    },

push、splice是数组两个api分别是表示增加和删除。具体用法就不做示范了。