el-form-item prop属性动态绑定不生效问题及解决

下面是“el-form-item prop属性动态绑定不生效问题及解决”的完整攻略：

问题描述

在Vue.js的Element UI框架中，使用el-form-item组件时，有时即便将组件的prop属性动态绑定到数据对象上，但修改数据对象时却没有触发组件的重新渲染，导致绑定失效。

例如，如下代码中的el-form-item组件，虽然将其prop属性disabled动态绑定到表单数据对象的disabled属性上，但控件仍然可以被点击和编辑。

<template>
  <el-form :model="form">
    <el-form-item label="名称" :prop="disabled ? '' : 'name'" :disabled="disabled">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      disabled: true,
      form: {
        name: 'John'
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.disabled = false
      this.form.name = 'Smith'
    }, 2000)
  }
}
</script>

原因分析

这个问题的原因在于，el-form-item组件的prop属性在首次渲染后被缓存，即使后面prop属性的值改变了，组件也不会重新渲染，因此动态绑定失效。

解决方案

解决这个问题的方法有两种：

1. 给el-form-item设置:key属性

方法是在el-form-item组件上添加:key属性，将其绑定到一个唯一的值上，例如：

<template>
  <el-form :model="form">
    <el-form-item label="名称" :prop="disabled ? '' : 'name'" :disabled="disabled" :key="getKey('name')">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      disabled: true,
      form: {
        name: 'John'
      }
    }
  },
  methods: {
    getKey(prop) {
      return this.disabled ? '' : prop
    }
  },
  mounted() {
    setTimeout(() => {
      this.disabled = false
      this.form.name = 'Smith'
    }, 2000)
  }
}
</script>

在方法getKey中，根据组件的prop属性值动态返回一个key值。这样，每当prop属性值改变时，就会以不同的key值重新渲染el-form-item组件，达到动态绑定的目的。

2. 使用v-if条件渲染

方法是使用v-if指令，将el-form-item组件放入一个div元素中，并通过一个条件表达式决定是否渲染该div元素。例如：

<template>
  <el-form :model="form">
    <div v-if="!disabled">
      <el-form-item label="名称" prop="name" :disabled="disabled">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </div>
    <div v-else>
      <el-form-item label="名称">
        <el-input v-model="form.name" disabled></el-input>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      disabled: true,
      form: {
        name: 'John'
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.disabled = false
      this.form.name = 'Smith'
    }, 2000)
  }
}
</script>

这里使用了两个div元素，分别包含有和无disabled属性的el-form-item组件。通过v-if指令，在组件的prop属性修改后，判断该条件表达式的值，动态渲染相应的div元素和子组件，达到动态绑定的目的。

总结

以上是解决“el-form-item prop属性动态绑定不生效问题”的两种方法，它们各有利弊，可以根据实际情况选择合适的一种。