在 el-table 树形结构中,如果存在多个 children 表单,需要进行必填校验,可以通过以下步骤实现:

  1. 使用 el-table 的 expand-row-keys 属性来展开所有数据行,包括 children 表单。

  2. 在 el-form 中使用 v-for 循环渲染多个 children 表单,并为每个表单设置一个唯一的 ref 属性。

  3. 在 el-form 中使用 el-form-item 标签包裹每个表单项,并为每个表单项设置一个唯一的 prop 属性。

  4. 使用 el-form 的 validate 方法进行表单校验,可以通过第二个参数传入一个 validator 函数,该函数接收一个参数,表示当前表单的 ref。

  5. 在 validator 函数中,使用 $refs 获取当前表单的所有 el-form-item 组件,并遍历校验每个表单项是否填写。

  6. 如果有任何一个表单项未填写,则返回一个错误信息。否则返回 true,表示校验通过。

以下是示例代码:

<el-table :data="tableData" :expand-row-keys="expandedKeys">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column label="Children">
    <template slot-scope="{ row }">
      <el-form :ref="'form-' + row.id" :model="row" :rules="rules" inline>
        <el-form-item label="Name" prop="name">
          <el-input v-model="row.name"></el-input>
        </el-form-item>
        <el-form-item label="Age" prop="age">
          <el-input v-model.number="row.age"></el-input>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'John',
          age: 20,
          children: [
            {
              id: 2,
              name: '',
              age: null
            },
            {
              id: 3,
              name: 'Bob',
              age: 18
            }
          ]
        }
      ],
      expandedKeys: [1],
      rules: {
        name: [
          { required: true, message: 'Name is required' }
        ],
        age: [
          { required: true, message: 'Age is required' }
        ]
      }
    }
  },
  methods: {
    validateForm() {
      for (const row of this.tableData) {
        const form = this.$refs['form-' + row.id][0]
        if (form) {
          if (!form.validate()) {
            return false
          }
        }
      }
      return true
    },
    submitForm() {
      if (this.validateForm()) {
        // submit form data
      }
    }
  }
}
</script>
``
el-table 树形结构中多个 children 表单的必填校验

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

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