element-plus form 表单嵌套表格树单行校验问题

需要实现这样的效果,单行校验表格树

公共方法可以直接用
 

const findPosi = (tree, targetId, path = "") => {
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.id === targetId) {
      return path + i;
    }
    if (node.sub_parameters && node.sub_parameters.length > 0) {
      const childPath = `${path}${i}.sub_parameters.`;
      const result = findPosi(node.sub_parameters, targetId, childPath);
      if (result !== null) {
        return result;
      }
    }
  }
  return null;
};

规则对象跟输入部分表单重复了,名字没改

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您使用的是 element-plus 的表格表单组件,并且需要进行校验,可以使用其提供的校验规则和自定义校验方法。 对于表格组件,您可以在列定义中添加 `rules` 属性来设置校验规则,例如: ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"></el-table-column> <el-table-column prop="age" label="年龄" :rules="[{ required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值' }]"></el-table-column> </el-table> ``` 在上述示例中,我们为姓名和年龄两列设置了校验规则,其中 `required` 表示必填,`type` 表示输入类型。当表格中的数据被修改时,如果不符合校验规则,将会弹出相应的提示信息。 对于表单组件,您可以使用 `el-form` 组件中的 `rules` 属性来设置校验规则,例如: ```html <el-form :model="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` 在上述示例中,我们设置了一个 `form` 对象来存储表单数据,并为姓名和年龄两个字段设置了校验规则。当用户提交表单时,如果不符合校验规则,将会弹出相应的提示信息。 您还可以使用自定义校验方法来实现更复杂的校验逻辑,例如: ```html <el-form :model="form" :rules="rules"> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password"></el-input> </el-form-item> <el-form-item label="确认密码" prop="password2"> <el-input v-model="form.password2" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` ```js data() { return { form: { password: '', password2: '' }, rules: { password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { validator: this.validatePassword, trigger: 'blur' } ], password2: [ { required: true, message: '请再次输入密码', trigger: 'blur' }, { validator: this.validatePassword2, trigger: 'blur' } ] } } }, methods: { validatePassword(rule, value, callback) { if (value.length < 6 || value.length > 16) { callback(new Error('密码长度应为6-16位')) } else { callback() } }, validatePassword2(rule, value, callback) { if (value !== this.form.password) { callback(new Error('两次输入的密码不一致')) } else { callback() } }, submitForm() { this.$refs.form.validate(valid => { if (valid) { // 校验通过,提交表单 } else { // 校验不通过,弹出提示信息 } }) } } ``` 在上述示例中,我们为密码和确认密码两个字段设置了自定义校验方法 `validatePassword` 和 `validatePassword2`,用于检查密码长度和两次输入的密码是否一致。在提交表单时,我们调用 `$refs.form.validate` 方法来进行校验,并根据校验结果来决定是否提交表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值