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

  1. 在树型表格的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>
  1. 在树型表格的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'
        }
      ]
    }
  }
}
  1. 在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>
  1. 在提交表单时,使用this.$refs.form.validate方法进行校验。例如:
methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        console.log('校验通过')
      } else {
        console.log('校验失败')
      }
    })
  }
}
``
el-table 树型表格 children中的input 无法匹配prop值 进行el-form校验

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

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