【element-ui】elementUI表单验证时，动态$refs报错

Z时代
2024-01-10
分类：技术分享

代码如下：
`

<el-table :data="formLabelAlign">
  <el-table-column label="地址">
    <template slot-scope="scope">
      <el-form :rules="rules" :model="scope.row.data" ref="'ref_name'+scope.$index">
        <el-form-item :label="scope.row.data.labe_name" prop="name">
          <el-input v-model="scope.row.data.name"></el-input>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-button @click="submit(scope.$index,'ref_name')">提交</el-button>
    </template>
  </el-table-column>
</el-table>
return {
  formLabelAlign: [
    {
      name: "one",
      data: {
        labe_name: "one",
        name: "",
        son: [{ age: 18 }]
      }
    },
    {
      name: "two",
      data: {
        labe_name: "two",
        name: "",
        son: [{ age: 18 }]
      }
    }
  ],
  rules: {
    name: [
      { required: true, message: "不能为空", trigger: "blur" },
      { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
    ]
  }
};
  submit(index, ref_name) {      
  this.$refs['ref_name'+index].validate(valid => {
    if (valid) {
      console.log(index + "：OK");
    } else {
      console.log(index + "：NO");
      return false;
    }
  })}