可能是因为 el-table 的 children 参数是一个数组,而 el-form 的 prop 值是一个字符串。如果想要进行 el-form 校验,可以在 el-table 的每个子节点中添加一个隐藏的 input 标签,并设置其 value 值为当前节点的相关信息,如下所示:

<el-table :data="treeData">
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="{row}">
      <el-form ref="form" :model="row" :rules="rules" :key="row.id">
        <input type="hidden" :value="JSON.stringify(row)" name="treeNode">
        <el-form-item prop="name">
          <el-input v-model="row.name"></el-input>
        </el-form-item>
        <el-form-item prop="age">
          <el-input v-model="row.age"></el-input>
        </el-form-item>
        <el-form-item prop="gender">
          <el-radio-group v-model="row.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
</el-table>

然后在 el-form 触发校验时,可以通过表单的 submit 方法获取到每个隐藏的 input 标签的值,进而获取到每个节点的相关信息,进行校验操作。具体代码如下:

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        const treeNodes = []
        const inputs = document.querySelectorAll('input[name="treeNode"]')
        for (let i = 0; i < inputs.length; i++) {
          treeNodes.push(JSON.parse(inputs[i].value))
        }
        console.log(treeNodes)
        // 校验通过,进行提交操作
      } else {
        // 校验不通过,进行错误提示
      }
    })
  }
}
``
el-table 树型表格 children 无法匹配prop值 进行el-form校验

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

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