在form表单中嵌套表格动态添加属性检验功能

最新推荐文章于 2024-02-21 11:54:30 发布

周星星日记

最新推荐文章于 2024-02-21 11:54:30 发布

阅读量428

点赞数

分类专栏： element-ui 文章标签：前端

本文链接：https://blog.csdn.net/sky___Show/article/details/132017916

版权

element-ui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3应用中，如何在form表单内嵌套表格并动态添加属性，同时对每个属性进行验证。关键点在于使用`:prop`绑定动态生成的属性名，并结合自定义的验证方法`checkName`来确保属性值的有效性和唯一性。表格中的属性名需满足特定正则表达式，且不允许重复。

摘要由CSDN通过智能技术生成

先贴一张场景图，就是在form表单中，我们嵌套了表格，但是表格的属性是动态添加的，我们需要在动态添加的时候，给每一个属性名都做出检验
在这里插入图片描述
我们理解需求之后，我们就开始实现我们的代码
1.先定义自己的数据

let form = reactive({
  name: "",
  defaultName: "",
  propTable: [{
   	name: "",
    dataType: "string",
  }],
});

2.参考element-plus中对于动态表单添加的校验规则我们很容易写出来下面代码
关键就是对于给表格动态添加验证属性

 :prop="'propTable.' + $index + '.name'"

而这段代码的关键就是在于 .name和你写在form数据中name一样，才能生效
完整代码如下：

    <el-form
          :model="form"
          :rules="rules"
          ref="ruleFormRef"
          label-width="120px"
          label-position="top"
        >
        <el-form-item label="属性">
            <el-table
             :data="form.propTable"
              style="width: 100%"
              max-height="300"
              :row-class-name="tableRowClassName"
              ref="editTable"
            >
              <el-table-column label="属性名称" prop="name">
                <template v-slot="{ row, $index }">
                  <span v-if="!row.isEdit">{{ row.name }}</span>
                  <el-form-item
                    v-if="row.isEdit"
                    :prop="'propTable.' + $index + '.name'"
                    :key="$index"
                    :rules="[
                      {
                        validator: checkName,
                        trigger: 'change',
                      },
                    ]"
                  >
                    <el-input
                      type="text"
                      placeholder="请输入属性名"
                      v-model="row.name"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
 </el-form>

checkName验证方法

const checkName = (rule: any, value: any, callback: any) => {
  let nameReg = /^(?![_$])/;
  if (value.trim() === "") {
    isableSave.value = true;
    callback(new Error("属性不能为空"));
  } else if (!nameReg.test(value)) {
    callback(new Error("属性名不能以$和下划线开头"));
  } else {
  	//属性的重复名称检验
    let vaildArr = form.propTable.slice(0, form.propTable.length - 1);
    let falg = false;
    vaildArr.forEach((item) => {
      if (item.name.trim() === value.trim()) {
        falg = true;
      }
    });
    if (falg) {
      isableSave.value = true;
      callback(new Error("属性不能重复"));
    } else {
      isableSave.value = false;
      callback();
    }
  }
};片