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

众所周知，在form表单中，el-select、el-input等需要使用v-model绑定变量，这个变量就是当前选择\输入的内容，一般会取ruleForm作为入参

<el-form
    ref="ruleFormRef"
    :model="ruleForm"
    inline
  >
    <el-form-item label="城市">
      <el-select v-model="">
        <el-option label="南京" :value="1" />
      </el-select>
    </el-form-item>  
</el-form>

如果想二次封装form表单，或者引用同一个form表单作为子组件，但是v-model绑定的字段名不固定，可以通过props传值的方式解决

过程：

• modelkey是父组件传过来的变量，里面定义的就是el-form表单中的v-model绑定的字段名

// father.vue
<template>
	// 引入的子组件
	<Child :modelkey="['task_name', 'task_status']" />
</template>

// child.vue
<template>
	<el-form
	    ref="ruleFormRef"
	    :model="ruleForm"
	    inline
	  >
	    <el-form-item label="城市">
	    	/*
				正常v-model应该是写：v-model="ruleForm.task_name"
				但是task_name字段并不是固定的，可以在写modelkey的时候，按照el-form表单内容展示的顺序去写，就可以用下标一一对应上v-model要绑定的字段
			 */
		 {
    
    {
    
     Object.keys(ruleForm)[0] }}   /* 这里打印一下，可以发现就是task_name*/
	      <el-select v-model="ruleForm[Object.keys(ruleForm)[0]]">
	        <el-option label="南京" :value="1" />
	      </el-select>
	    </el-form-item>  
	    <el-form-item label="状态">
	      <el-input v-model="ruleForm[Object.keys(ruleForm)[1]]">
	      </el-input >
	    </el-form-item> 
	</el-form>
</template>

<script lang="ts">
import {
    
     defineComponent, ref } from 'vue'

export default defineComponent({
    
    
	props: {
    
    
	   modelkey: {
    
    
	     type: [Array, Object, string],
	     default: null
	   },
	}
	setup(props: any) {
    
    
		let ruleForm = ref<any>({
    
    })
		// 1-如果modelkey是Array
		props.modelkey?.forEach((item) => {
    
    
	      ruleForm.value[item] = undefined   // 我把属性值设置为undefined，是因为某个变量没有输入值时，入参不传，可自行根据你项目要求去设置默认属性值
	    })
	    console.log(ruleForm.value)		// 此时拿到的ruleForm = { task_status: undefined, task_name: undefined }，便实现了v-model绑定的字段名是动态设置的

		// 2-如果modelkey是Object
		Object.keys(props.modelkey)?.forEach((key) => {
    
    
			ruleForm.value[key] = undefined
		})
		
		// 最重要的一步是，v-model里面怎么写，去看template
	    
		return {
    
    
			ruleForm
		}
	}
})
</script>