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

2024-02-19 09:59:40

问题

今天同事问了我一个问题，以下代码会报错，请先看代码：

<template>
  <el-form :model="formData" label-width="120px">
    <el-form-item label="城市" prop="address.city">
      <el-select v-model="formData.address.city">
        <el-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue'
import { cityList } from './city-list'

export default {
  setup() {
    const formData = ref({
      address: {
        city: ''
      }
    })

    return {
      formData,
      cityList
    }
  }
}
</script>

重点是el-form-item组件的prop属性。我第一眼看上去的时候并没有发现什么问题，但这段代码实实在在的报错了。

问题分析

经过一番分析，我终于找到了问题所在。原来，el-form-item组件的prop属性只能是一个字符串，而不能是一个对象。也就是说，我们不能像上面那样直接把一个对象作为prop属性的值。

解决方案

那么，如何解决这个问题呢？我们可以使用computed属性来创建一个新的prop属性，然后再把这个新的prop属性作为el-form-item组件的prop属性的值。

<template>
  <el-form :model="formData" label-width="120px">
    <el-form-item label="城市" :prop="computedProp">
      <el-select v-model="formData.address.city">
        <el-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref, computed } from 'vue'
import { cityList } from './city-list'

export default {
  setup() {
    const formData = ref({
      address: {
        city: ''
      }
    })

    const computedProp = computed(() => {
      return 'address.city'
    })

    return {
      formData,
      cityList,
      computedProp
    }
  }
}
</script>