Element UI 表格树形结构表单必填校验 - 详解与代码示例

可以使用 el-form 组件中的 rules 属性来进行表单的必填校验。在 rules 中定义每个表单项的验证规则，包括必填验证、长度验证、格式验证等。对于 el-table 中的树形结构，可以在渲染树形结构时给每个节点添加一个 isRequired 属性，然后在 rules 中根据该属性来进行必填验证。具体实现可以参考以下代码：

<el-table :data="tableData" :tree-props="{ children: 'children' }">
  <el-table-column prop="name" label="名称" />
  <el-table-column prop="age" label="年龄" />
  <el-table-column prop="gender" label="性别" />
  <el-table-column label="操作">
    <template slot-scope="{ row }">
      <el-button @click="deleteRow(row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

<el-form ref="form" :model="formData" :rules="formRules">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="formData.name" />
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="formData.age" />
  </el-form-item>
  <el-form-item label="性别" prop="gender">
    <el-radio-group v-model="formData.gender">
      <el-radio label="男">男</el-radio>
      <el-radio label="女">女</el-radio>
    </el-radio-group>
  </el-form-item>
</el-form>

export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          gender: '男',
          children: [
            { name: '李四', age: 22, gender: '男', isRequired: true },
            { name: '王五', age: 18, gender: '女', isRequired: false }
          ]
        },
        {
          name: '赵六',
          age: 25,
          gender: '女',
          children: [
            { name: '钱七', age: 30, gender: '男', isRequired: true }
          ]
        }
      ],
      formData: {
        name: '',
        age: '',
        gender: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }]
      }
    }
  },
  methods: {
    deleteRow(row) {
      // 删除某一行数据
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交表单
        } else {
          // 表单验证不通过，提示错误信息
        }
      })
    }
  }
}

在上述代码中，我们为 el-table 中的数据加上了 isRequired 属性，表示该节点是否必填。在 el-form 中，我们定义了表单的验证规则，其中 name、age、gender 分别对应表单中的三个输入项。在验证规则中，我们使用了 required 规则，并根据 isRequired 属性来动态决定是否进行必填验证。在提交表单时，我们调用 el-form 的 validate 方法来进行表单验证，如果验证通过则提交表单，否则提示错误信息。