vue中自定义v-model表单组件

刺骨的言语ヽ痛彻心扉 2022-09-08 12:59 192阅读 0赞

使用场景：当在父组件中定义好了表单元素，想实时查看表单元素，比如涉及到组件包含上一步、下一步等步骤时，需要返回上一步查看填写的表单内容，就需要使用 `v-model` 来实时查看表单数据了  
**父组件**

<template v-else-if="active === 2">
    	<role-form ref="roleInfo" v-model="roleInfo" />
    </template>
    
    ...
    roleInfo: [{ 
       name: '',
       time: '',
       remark: ''
    }],
    ...

**子组件** `AccountForm.vue`

<template>
      <div class="contain-info">
        <el-card>
          <div slot="header">
            <el-button type="primary" size="small" @click="add">新增</el-button>
          </div>
          <el-form :rules="roleRules" ref="roleForm" label-width="140px" class="demo-dynamic" :inline="true" v-for="(item,index) in roleInfo" :key="index" :model="item" >
            <el-form-item v-if="roleInfo.length > 1" class="removebutton">
              <el-button size="small" type="danger" @click.prevent="remove(item, index)">移除</el-button>
            </el-form-item>
            <el-form-item prop="name" label="姓名">
              <el-input maxlength="32" v-model="item.name"></el-input>
            </el-form-item>
            <el-form-item prop="time" label="创建时间">
              <el-input maxlength="50" v-model="item.time" placeholder="YYYY-MM-dd HH:mm:ss"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
              <el-input maxlength="50" v-model="item.remark"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </template>
    
    <script>
    export default { 
      props: { 
        value: Array
      },
      data() { 
        return { 
          personData: [],
          roleInfo: [{ 
            name: '',
            time: '',
            remark: ''
          }],
          roleRules: { 
            name: [{  required: true, message: '请输入姓名', trigger: 'blur' }]
          }
        }
      },
      mounted() { 
        if (this.value) { 
          this.roleInfo = this.value
        }
      },
      methods: { 
        validateForm(formName) { 
          let returnValue
          this.$refs[formName].forEach(item => { 
            item.validate((valid) => { 
              if (valid) { 
                returnValue = true
              } else { 
                returnValue = false
              }
            })
          })
          return returnValue
        },
        resetForm(formName) { 
          this.$refs[formName].forEach(item => { 
            item.resetFields()
          })
        },
        remove(item, index) { 
          if (this.roleInfo.length > 1) { 
              this.roleInfo.splice(index, 1)
          }
        },
        add() { 
          this.roleInfo.push({ 
            name: '',
            time: '',
            remark: ''
          })
        }
      },
      watch: { 
        value: { 
          handler(data) { 
            this.roleInfo = this.value
          },
          deep: true
        },
        roleInfo: { 
          handler(data) { 
            this.$emit('input', this.roleInfo)
          },
          deep: true
        }
      }
    }
    </script>