element中form组件prop嵌套属性的问题解决

当我们在使用element组件库的form组件进行表单处理时，可能会遇到prop属性中需要嵌套传递另一个属性值的情况。比如，我们需要将一个表单项的验证规则（rules）传递给另外一个表单项，例如两个密码输入框输入必须相同。

以下是解决此类问题的攻略：

步骤一：在模板中添加ref属性

在模板中，我们需要添加一个ref属性来标识这个表单项，这样我们在代码中就可以通过this.$refs属性找到这个表单项，然后获取它的属性值。

例如，我们在一个表单中需要验证两次密码框中的输入是否相同，可以将两个密码框都设置为ref属性值为"password"，如下所示：

<el-form>
  <el-form-item label="密码" prop="passwordOne">
    <el-input type="password" v-model="passwordOne" ref="password"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="passwordTwo">
    <el-input type="password" v-model="passwordTwo" :rules="[{ validator: checkPassword, trigger: 'blur' }]"></el-input>
  </el-form-item>
</el-form>

注意到上面的示例中，我们将第二个密码框的rules属性设置为一个数组，数组中包含了一个对象，该对象包含了一个validator属性和一个trigger属性。其中，validator属性的值是一个我们声明的方法checkPassword，它将用于验证两个密码框输入值是否相同；trigger属性表示验证的触发时机，这里设置为失去焦点时验证。下面我们将在其中的checkPassword方法中获取第一个密码框的值，从而进行比较。

步骤二：在代码中获取元素并进行处理

在代码中，我们可以通过this.$refs属性来获取模板中声明的ref属性值，然后进行进一步的处理。对于上面的示例，我们可以编写如下的代码来实现密码验证：

<script>
export default {
  data() {
    return {
      passwordOne: "",
      passwordTwo: ""
    };
  },
  methods: {
    checkPassword(rule, value, callback) {
      if (value !== this.$refs.password.$children[0].value) {
        callback(new Error("两次密码输入不同"));
      } else {
        callback();
      }
    }
  }
};
</script>

以上示例中，我们定义了一个checkPassword方法，它接收三个参数——规则、当前表单项的值和回调函数。当验证不通过时，我们手动调用回调函数并传递一个错误对象，该对象包含了错误信息。当验证通过时，我们只调用回调函数而不传递任何参数。

接下来，在这个方法中，我们使用this.$refs属性获取了我们在模板中声明的ref属性值为"password"的表单项。它是个数组，但实际上有且仅有一个元素，因此我们通过索引获取了其第一个元素，并进一步获取该元素的第一个子元素，即密码框中的输入框。获取到这个输入框后，我们使用了其value属性获取了真实的密码输入值，然后将其与当前表单项的值进行比较。

以上就是关于element中form组件prop嵌套属性的问题解决的详细攻略，同时也提供了一个实际用例。请注意，该攻略是通用的，可以用于解决其他类似的问题。