Element UI 树型表格 children 中 input 校验方法

如果您想要对树型表格中的 children 节点中的 input 进行 el-form 校验，可以采用以下方法：

在树型表格的 columns 中定义一个 scoped slot，用于渲染 children 节点的 input，并将其 v-model 绑定到相应的数据属性上。例如：

<el-table-column label='名称'>
  <template slot-scope='{ row }'>
    <div v-if='row.children'>
      <el-form-item v-for='(child, index) in row.children' :key='index' :prop=''children.' + index + '.name'' :rules='[{ required: true, message: '请输入名称', trigger: 'blur' }]'>
        <el-input v-model='child.name'></el-input>
      </el-form-item>
    </div>
    <div v-else>
      {{ row.name }}
    </div>
  </template>
</el-table-column>

在树型表格的 data 中定义一个 rules 对象，用于存放校验规则。例如：

data() {
  return {
    data: [
      {
        name: '父节点1',
        children: [
          { name: '子节点1' },
          { name: '子节点2' }
        ]
      },
      {
        name: '父节点2',
        children: [
          { name: '子节点3' },
          { name: '子节点4' }
        ]
      }
    ],
    rules: {
      children: [
        {
          type: 'array',
          required: true,
          message: '请至少输入一个子节点',
          trigger: 'blur'
        }
      ]
    }
  }
}

在 el-form 中使用该 rules 对象进行校验。例如：

<el-form :model='data' :rules='rules' ref='form'>
  <el-table :data='data' highlight-current-row>
    // 定义树型表格的 columns 和 scoped slot
  </el-table>
  <el-form-item>
    <el-button type='primary' @click='submitForm'>提交</el-button>
  </el-form-item>
</el-form>

在提交表单时，使用 this.$refs.form.validate 方法进行校验。例如：

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        console.log('校验通过')
      } else {
        console.log('校验失败')
      }
    })
  }
}