如果你想在el-table中使用el-form校验,可以使用以下方法:

1.在el-table的列定义中,使用scoped slot来自定义每个单元格的内容,将input组件放在其中,并将v-model绑定到数据源中的相应属性:

<template>
  <el-table :data="tableData">
    <el-table-column label="Username">
      <template slot-scope="scope">
        <el-form-item prop="username">
          <el-input v-model="scope.row.username"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column label="Email">
      <template slot-scope="scope">
        <el-form-item prop="email">
          <el-input v-model="scope.row.email"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</template>

2.在el-form中使用ref属性给表格命名,并在提交时调用该表格的validate方法进行校验:

<template>
  <el-form :model="form" ref="myTable">
    <el-table :data="tableData">
      ...
    </el-table>
    <el-button @click="submitForm">Submit</el-button>
  </el-form>
</template>
<script>
export default {
  methods: {
    submitForm() {
      this.$refs.myTable.validate((valid) => {
        if (valid) {
          // 校验通过,提交表单
        } else {
          // 校验失败,处理错误
        }
      });
    },
  },
}
</script>

3.在el-form-item中使用prop属性来指定要校验的字段名,该名称应与数据源中的属性名称相同。如果prop属性值不匹配,将无法进行校验。

注意:在使用el-table时,需要确保给表格传递一个唯一的key属性,以便在数据更新时正确地渲染和更新表格

el-table children中的input 无法匹配prop值 进行el-form校验

原文地址: http://www.cveoy.top/t/topic/hmoo 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录