vue3 el-table 树形结构 多个children 表单 必填校验

可以使用自定义校验规则来实现必填校验。

首先，在 el-table 中使用 scoped slot 渲染树形结构，并在每个节点的数据中添加一个 required 属性表示是否必填。

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="children" label="子节点">
    <template slot-scope="{ row }">
      <span v-if="row.children && row.children.length">
        <el-table :data="row.children" style="width: 100%">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="required" label="必填">
            <template slot-scope="{ row }">
              <el-checkbox v-model="row.required"></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </span>
    </template>
  </el-table-column>
</el-table>

然后，定义一个自定义校验规则来判断每个必填节点是否填写了值。

const validateRequired = (rule, value, callback) => {
  if (value === undefined || value === null || value === '') {
    callback(new Error('该字段为必填项'))
  } else {
    callback()
  }
}

最后，使用 el-form 的 rules 属性来添加自定义校验规则，同时也需要在 el-form-item 中设置 prop 属性和 rules 属性。

<el-form ref="form" :model="formData" :rules="rules">
  <el-form-item label="名称" prop="name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
</el-form>

data() {
  return {
    tableData: [
      {
        name: '节点1',
        children: [
          {
            name: '子节点1',
            required: true
          },
          {
            name: '子节点2',
            required: false
          }
        ]
      },
      {
        name: '节点2',
        children: [
          {
            name: '子节点3',
            required: true
          }
        ]
      }
    ],
    formData: {},
    rules: {}
  }
},
mounted() {
  this.initRules()
},
methods: {
  initRules() {
    const traverse = (data, path) => {
      data.forEach((item, index) => {
        const itemPath = path ? `${path}.${index}` : index.toString()
        if (item.children && item.children.length) {
          traverse(item.children, itemPath)
        } else if (item.required) {
          this.$set(this.rules, itemPath, [{ validator: validateRequired, trigger: 'blur' }])
        }
      })
    }
    traverse(this.tableData, '')
  },
  submit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 提交表单
      }
    })
  }
}

这样就可以实现 el-table 树形结构中多个 children 表单的必填校验了