美文网首页
新增、编辑表单-VUE共用组件

新增、编辑表单-VUE共用组件

作者: 菲鸽 | 来源:发表于2018-06-28 16:58 被阅读0次

--public time : 2018-06-28<四>--

一、概述

1、【新增】 要求每次点击·新增按钮·都可以新建一个form表单,表单默认是空的。
2、【编辑】 要求每次点击·编辑按钮·都可以自动填充该记录到表单里面!

二、数据

const defaultForm = {
  name: '',
  region: '广州',
  resource: '',
  desc: ''
}
data() {
    return {
        ruleForm: Object.assign({}, defaultForm)
    }
}

三、方法、事件

methods: {    
    createForm() {
      this.dialogVisible = true
      this.ruleForm = Object.assign({}, defaultForm)
    },
    editForm() {
      this.dialogVisible = true
      this.ruleForm = Object.assign({}, formData)
    }
  }

如果不是手动触发事件,那么可以通过这样:

created() {
    if (this.isEdit) {
      // this.fetchData() // 后台获取数据
      this.postForm = Object.assign({},formData) // 本条记录的数据
    } else {
      this.postForm = Object.assign({}, defaultForm)
    }
  },

相关文章

网友评论

      本文标题:新增、编辑表单-VUE共用组件

      本文链接:https://www.haomeiwen.com/subject/oxfnyftx.html