elementui表格嵌套校验表单，这个表格是带勾选的，在提交的时候，怎么能让只勾选的行进行校验


<script>
export default {
  data() {
    return {
      tableData: [
        { name: "Alice", age: 25 },
        { name: "Bob", age: 30 },
        // 其他表格数据
      ],
      formData: {},
      rules: {
        // 表单输入项的校验规则
        // ...
      },
      checkedRows: [], // 用于跟踪勾选的行
    };
  },
  methods: {
    // 提交表单时，对勾选的行进行校验
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，对勾选的行进行其他处理
          console.log("校验通过，勾选的行为：", this.checkedRows);
        } else {
          console.log("表单校验不通过");
        }
      });
    },
  },
};
</script>

你参考这个写咯

提交的时候判断根据勾选获取的id 去过滤表格数据再去执行对应的表单校验

不知道你这个问题是否已经解决, 如果还没有解决的话:

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7446852
这篇博客也不错, 你可以看下elementUi中根据选中的数据，取消勾选表格行数据。

除此之外, 这篇博客: elementui循环渲染的表单添加字段的校验中的 提交时判断校验状态 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

// 修改收款信息
updateReceivable(val,index){
	// console.log(val)
	// console.log('item'+index)
	let reff = 'item'+index
	this.$refs[reff][0].validate((valid) => {  //此处不加[0]会报错===》this.$refs[("item" + index)].validate is not a function
		console.log(valid);
		if(valid){
			val.actualTime = val.actualTime == null ?  null : moment(val.actualTime).format('YYYY-MM-DD')
			val.finishTime = val.finishTime == null ?  null : moment(val.finishTime).format('YYYY-MM-DD')
			val.estimatedReceivableTime = val.estimatedReceivableTime == null ?  null : moment(val.estimatedReceivableTime).format('YYYY-MM-DD')
			val.actualReceivableTime = val.actualReceivableTime == null ?  null : moment(val.actualReceivableTime).format('YYYY-MM-DD')
			
			this.$$api_project_updateReceivable({
				data: val,
				fn: () => {
					this.$message.success('提交成功')
					this.loadReceivableList()
				}
			})
		}
	})
	return false;
},

以下回答由chatgpt基于相关博客总结生成:

针对这个问题，我可以给出以下解决方案:

首先，需要在element-ui表格中创建一个勾选列，用于获取勾选的行数据。可以使用<el-table-column>组件，并添加一个type="selection"属性。如下所示：

<el-table-column type="selection" width="50"></el-table-column>

在提交时，获取已勾选的行数据，并进行校验。可以在提交按钮的点击事件中，使用element-ui的校验方法，如this.$refs['表单引用'].validate()。在validate方法中，可以通过指定校验规则来只校验勾选的行。具体步骤如下：

// 在提交按钮的点击事件中
submitForm() {
  // 获取已勾选的行数据
  const selectedRows = this.$refs['表格引用'].getSelection();

  // 创建一个临时数组，用于存储已勾选的行的表单引用
  const formRefs = [];

  // 遍历已勾选的行数据
  selectedRows.forEach(row => {
    // 获取该行对应的表单引用，并将其添加到临时数组中
    const refName = `formRef_${row.id}`;
    formRefs.push(this.$refs[refName]);
  });

  // 对已勾选的行进行校验
  Promise.all(formRefs.map(formRef => formRef.validate()))
    .then(() => {
      // 校验通过，执行提交操作
      // ...
    })
    .catch(() => {
      // 校验失败
      // ...
    });
}

在表格中嵌套校验的表单时，需要给每一个表单添加一个引用，用于后续的校验操作。可以使用ref属性给每个表单元素添加一个引用，如下所示：

<!-- 表格中的校验表单 -->
<el-form ref="formRef_{{row.id}}" :model="row">
  <!-- 表单的具体内容 -->
  <!-- ... -->
</el-form>

最后，可以根据具体的校验规则，使用element-ui提供的校验属性来对表单进行校验。可以使用required属性来标记必填项，并使用其他属性来添加更多的校验规则。如下所示：

<!-- 表单的具体内容 -->
<el-form-item label="用户名" label-width="70px" :required="true">
  <el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>

通过以上步骤，就可以实现在element-ui表格中只校验已勾选的行的功能。如果在实际操作中遇到问题，可以根据具体情况进行调整和修改。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

动态绑定验证规则，判断选中绑定验证，否则绑定为空

<template>
  <div class="wrap">
    <el-form :model="form" ref="form">
      <el-table
        ref="table"
        :data="form.tableData"
        @selection-change="selectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="姓名"
          width="180">
          <template slot-scope="scope">
            <el-form-item
              :prop="`tableData.${scope.$index}.name`"
              :rules="isSelected(scope.row.id) ? rules.name : null">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="地址">
          <template slot-scope="scope">
            <el-form-item
              :prop="`tableData.${scope.$index}.address`"
              :rules="isSelected(scope.row.id) ? rules.address : null">
              <el-input v-model="scope.row.address"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button @click="submit">提交</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        tableData: [
          { id: 1, name: '张三', address: '' },
          { id: 2, name: '李四', address: '' },
          { id: 3, name: '王五', address: '' },
          { id: 4, name: '赵六', address: '' }
        ]
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      },
      selectedRows: []
    }
  },
  methods: {
    selectionChange (sel) {
      this.selectedRows = sel
    },
    // 是否选中
    isSelected (id) {
      let target = false
      const index = this.selectedRows.findIndex(item => item.id === id)
      if (index !== -1) {
        target = true
      }
      return target
    },
    submit () {
      this.$refs.form.clearValidate() // 清除验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

不好意思，没有描述清楚，这个表格所有的数据都会提交，只是选中的和未选中的由一个字段来区分。现在是提交的时候，所有的行都会校验，我是想让这个选中的进行校验，达到一个提示的效果，就是只有选中并且没填的边框变红，没选的不要变样式，只需要实现这个样式的效果就好

两种
1.表单的勾选事件里修改rules
2.不走表单校验，自己写校验，做提示