【vue3+elementplus】动态设置二次封装的el-form组件中的v-model绑定的变量名

在Vue 3和Element Plus中，你可以通过props传递v-model绑定的变量名，并在内部使用computed和watch来实现动态绑定。以下是一个简化的例子：

<template>
  <el-form :model="formData">
    <el-form-item label="用户名">
      <el-input v-model="formData[inputPropName]"></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { ref, computed } from 'vue';
import { ElForm, ElFormItem, ElInput } from 'element-plus';
 
const props = defineProps({
  inputPropName: String
});
 
const formData = ref({});
 
// 使用computed来创建响应式属性
const formDataModel = computed(() => ({
  [props.inputPropName]: formData.value[props.inputPropName]
}));
 
// 监听formDataModel的变化，更新formData
watch(formDataModel, (newValue) => {
  formData.value = newValue;
});
</script>

使用此组件时，你可以传递inputPropName来动态更改el-input绑定的属性名：

<DynamicForm inputPropName="username" />

这样，你就可以根据需要动态设置el-form中的v-model绑定的变量名了。