vue为遍历生成的表单设置ref属性

最近在写表单重置的时候出现了问题,在this.$refs[formName].resetFields();的时候卡了很久。
经过网上的搜索终于解决的问题!

对于不需要遍历的表单

这是vue代码:

        <el-dialog title="段落描述" :visible.sync="dialogFormVisible">
          <el-form ref="test" :model="test" label-width="150px">
            <el-form-item prop="subtitle">
              <span slot="label">
                <span style="color:#333;font-size: 16px;"><strong>段落关键词</strong></span>
              </span>
              <el-input v-model="test.subtitle" clearable placeholder="请填写段落关键词"></el-input>
            </el-form-item>
            <el-form-item prop="maxLength">
              <span slot="label">
                <span style="color:#333;font-size: 16px;"><strong>段落最大字数</strong></span>
              </span>
              <el-input v-model="test.maxLength" clearable placeholder="请输入段落最大字数"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('test')">取 消</el-button>
            <el-button type="primary" @click="paragraphDefine">保 存</el-button>
          </div>
        </el-dialog>

这里是js代码:

resetForm(formName) {
    this.$refs[formName].resetFields();
}

要注意的地方:
要设置prop属性,与复制的对象一致。
保证ref的值唯一即可。
在这里插入图片描述

对于需要遍历的表单:

		<el-dialog title="段落描述" :visible.sync="dialogFormVisible">
          <div v-for="(item, index) in numberFormsList" :key="index">
            <el-form :ref="`paragraph${index}`" :model="paragraph[index]" label-width="150px">
              <el-form-item prop="subtitle">
                <span slot="label">
                  <span style="color:#333;font-size: 16px;"><strong>段落{{ index + 1 }}关键词</strong></span>
                </span>
                <el-input v-model="paragraph[index].subtitle" clearable placeholder="请填写段落关键词"></el-input>
              </el-form-item>
              <el-form-item prop="maxLength">
                <span slot="label">
                  <span style="color:#333;font-size: 16px;"><strong>段落{{index+1}}最大字数</strong></span>
                </span>
                <el-input v-model="paragraph[index].maxLength" clearable placeholder="请输入段落最大字数"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('paragraph')">取 消</el-button>
            <el-button type="primary" @click="paragraphDefine">保 存</el-button>
          </div>
        </el-dialog>

vue代码中唯一改变的地方是:

:ref="`paragraph${index}`"

我这里为了保持ref的唯一性,将index作为了后缀
如何重置这个由v-for循环生成的表单呢?

lresetForm(formName) {
   let i = 0;
   while (i < parseInt(this.form.number)) {
     this.$refs['paragraph' + i][0].resetFields();
     i++;
   }
},

注意:这里要加一个[0]
不然就会报错this.$refs.paragraph0.resetFields is not a function

这是因为我们打印一下:

console.log("0ref:", this.$refs['paragraph0']);

这里下面还有一个[0],然后才看得到resetFields()
在这里插入图片描述
对于不是v-for循环生成的表单,打印出来是这样的:

console.log("formref:", this.$refs['form']);

在这里插入图片描述
好了!这样就可以对v-for循环生成的表单进行重置了!

  • 7
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在使用Vue Element进行列表渲染时,可以使用v-for指令遍历每个表单项,并给每个表单项绑定校验规则。具体步骤如下: 1. 在表单项中添加规则属性 在每个表单项中添加一个规则属性,用于存放该项的校验规则: ``` <el-form :model="form" :rules="rules" ref="form"> <el-form-item v-for="(item, index) in form.items" :key="index" :label="item.label" :prop="'items.' + index + '.value'" > <el-input v-model="item.value"></el-input> </el-form-item> </el-form> ``` 2. 定义校验规则 在Vue实例中定义校验规则,可以使用Element提供的校验规则,也可以自定义校验规则。示例代码如下: ``` data() { return { form: { items: [ { label: '姓名', value: '' }, { label: '年龄', value: '' } ] }, rules: { items: [ { validator: this.validateName, trigger: 'blur' }, { validator: this.validateAge, trigger: 'blur' }, ] } } }, methods: { validateName(rule, value, callback) { if (!value) { callback(new Error('请输入姓名')); } else { callback(); } }, validateAge(rule, value, callback) { if (!value) { callback(new Error('请输入年龄')); } else if (!/^\d+$/.test(value)) { callback(new Error('年龄必须为数字')); } else if (value < 18 || value > 60) { callback(new Error('年龄必须在18-60之间')); } else { callback(); } } } ``` 3. 监听提交事件 在提交按钮的click事件中,调用表单的validate方法进行校验,如果校验通过,执行提交操作: ``` <el-button type="primary" @click="submitForm">提交</el-button> methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 校验通过,执行提交操作 } else { // 校验不通过,弹出错误提示 } }); } } ``` 以上步骤就是在Vue Element中遍历表单并使用表单校验的基本操作。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值