el-table表格中插入表单效验

最新推荐文章于 2024-10-14 16:09:37 发布

置顶章若楠别白给

最新推荐文章于 2024-10-14 16:09:37 发布

阅读量463

点赞数 2

文章标签： html java javascript elementui vue.js

本文链接：https://blog.csdn.net/ChenJMingGg/article/details/129815217

版权

1. 不能在单独写一个数组，应该改变数据结构。

 objList: {
          rules: {
              Name: {
                  required: true,
                  message: "比例名称不能为空",
                  tirgger: ["blur", "change"],
              },
          },
          blszList: [],
      },

2. 如果字段固定的话，rules 可以定义好也可以写在行内。

<el-form :model="objList" ref="formRef" :rules="objList.rules">
<el-table border ref="table" class="classTableHeight" :data="objList.blszList" :max-height="tableHeight">
    <el-table-column label="序号" align="center" width="60" type="index" />
    <el-table-column label="比例名称" :render-header="addRedStar" align="center" 
        prop="Name" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
            <el-form-item :prop="'blszList.' + scope.$index + '.Name'" 
        :rules="objList.rules.Name" style="width: 100%">
                <el-input v-model.trim="scope.row.Name" placeholder="请输入比例名称" 
          style="width: 100%"></el-input>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column label="分期项目一" :render-header="addRedStar" align="center" 
                  prop="money1" min-width="450" style="display: flex">
        <template slot-scope="scope">
            <el-form-item
                :prop="'blszList.' + scope.$index + '.money1'"
                :rules="[
                    { required: true, message: '比例不能为空', trigger: 'blur' },
                    { pattern: /(^(\d|[1-9]\d)(\.\d{1,2})?$)|(^100$)/, 
                      message: '请输入0-100之间的数字', trigger: 'blur' },
                ]"
            >
                <el-input v-model.trim="scope.row.money1" 
                      maxlength="6" placeholder="请输入比例"></el-input>
            </el-form-item>
            &nbsp; &nbsp; &nbsp;
            <el-form-item
                :prop="'blszList.' + scope.$index + '.money2'"
                :rules="[
                    { required: true, message: '金额不能为空', trigger: 'blur' },
                    { pattern: /^(-?[0-9]{0,11}|0)([.][0-9]{0,4})?$/, 
                      message: '请输入数字', trigger: 'blur' },
                ]">
                <el-input v-model.trim="scope.row.money2" maxlength="16" 
                      placeholder="请输入金额"></el-input>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="180" fixed="right">
        <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit"          
               @click="blszSave(scope.$index)">保存</el-button>
        </template>
    </el-table-column>
</el-table>
</el-form>

3. 最后在保存时，跟据不同的refs来进行单行效验。

// 效验单行
validateField(form, index) {
  let result = true;
  for (const item of this.$refs[form].fields) {
    if (item.prop.split(".")[1] === index.toString()) {
      this.$refs[form].validateField(item.prop, (error) => {
// 这里可以输入定义在 rules中的"message"信息 
      this.$message.warning(error);
    if (error !== "") {
      result = false;
}
});
}
      if (!result) break;
}
      return result;
},
// 保存
blszSave(index) {
     let result = this.validateField("formRef", index);
     if (result) return this.$message.success("保存成功");
},