动态添加下拉框（v2+element）

weixin_45367561

已于 2023-05-13 10:54:34 修改

阅读量482

点赞数 1

文章标签： vue.js

于 2023-05-12 23:12:46 首次发布

本文链接：https://blog.csdn.net/weixin_45367561/article/details/130651492

版权

点击动态添加下拉框并添加校验

代码 prop 绑定的是v-mode对应的数据，否则校验不想生效

      <el-form-item label="网关数量" :required="true">
              <div v-for="(item, index) in dataForm.device.net" :key="index">
                <el-col :span="11" style="padding-right: 0">
                  <el-form-item
                    :prop="'device.net.' + index + '.hantu.type'"
                    :rules="rules.type"
                  >
                    <el-select v-model="item.hantu.type" placeholder="全部">
                      <el-option
                        v-for="item in netOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="11" style="padding-right: 0">
                  <el-form-item
                    :prop="'device.net.' + index + '.hantu.num'"
                    :rules="rules.num"
                  >
                    <el-input
                      v-model="item.hantu.num"
                      type="number"
                      min="1"
                      placeholder="数量"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="2" style="padding-right: 0">
                  <img
                    v-if="
                      index === dataForm.device.net.length - 1 && index !== 0
                    "
                    @click="netdel(index)"
                    src="@/assets/image/customer_slices/minus.png"
                    alt="group_420"
                  />
                  <img
                    v-else
                    src="@/assets/image/customer_slices/plus.png"
                    @click="netAdd()"
                    alt="group_420"
                  />
                </el-col>
              </div>
            </el-form-item>

data里的数据

      dataForm: {
        //设备信息
        device: {
          net: [
            {
              hantu: {
                type: "",
                num: null,
              },
            },
          ],
          mccb: [
            {
              lb_mccb_004: [
                {
                  type: "",
                  num: null,
                },
              ],
            },
          ],
          mach: [
            {
              lb_mach_001: [
                {
                  pp: "",
                  type: "",
                  num: null,
                },
              ],
            },
          ],
        },
      },

事件往data里面添加数据

    //添加 网关数量
    netAdd() {
      this.dataForm.device.net.push({
        hantu: {
          type: "",
          num: null,
        },
      });
    },
    //删除 网关数量
    netdel(index) {
      console.log("idnex,", index);

      this.dataForm.device.net.splice(index, 1);
    },

校验写法


      rules: {
        type: [{ required: true, message: "请选择", trigger: "change" }],

        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
      
    },