elementui 动态渲染的 form 使用 submit 获取提交的数据

·  阅读 359
elementui 动态渲染的 form 使用 submit 获取提交的数据

这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战

动态表单需求及实现思路

我的项目有一个通用的 form 组件,内部渲染了海量的 form 元素,有input、checkbox、select,radio 等等。

这个 form 组件,在不同的页面要根据需求展示不同的表单元素。

这样一个复杂的组件,我肯定不能手动排版啊。

于是果断跟后台商量一下,通过后台返回的 json 数据来动态渲染页面的表单元素,另外一些不方便返回的数据,本地写个 json。

比如这种:

[{
    type: input,
    value: '',
    default: 0,
    describle: '请输入年龄'size: 'middle'
},
{
    type: select,
    value: '',
    default: '北京',
    describle: '请选择城市'size: 'middle',
    options: ['北京','天津']
},
...
]
复制代码

然后我们遍历这个 json 数据,根据 type 字段渲染出表单元素就行了。

写完美滋滋。

一个问题

一提交数据,发现后端验证不通过。

打开 network,看看何方妖孽在兴风作浪?

结果发现因为项目用的是 vue,由于所有的表单数据都会定义在 data 函数的 form属性下,比如

data(){
	return {
		form: {
			username: '',
			userRole: '',
			ifLoginForbid: false,
                        ....
		}
	}
}
复制代码

导致在使用 axios 提交数据时把所有的表单的数据一起提交了,这里的 form 是几个页面共有的所有的数据。

因为页面通过各种 v-for 来动态的生成了当前页面需要的表单元素,但 data 中定义的数据在提交的时候不好进行判断。

如果手动去写各种 if 条件判断来提交哪些数据,过滤哪些数据,判断太多,代码笨重还不好维护。

怎么解决

所以就想到使用 form 自带的 submit,嘿嘿嘿嘿。

因为 form 自带的 submit 是根据页面存在的元素来提交数据的,如果我们使用这个 submit 方法,先把后台需要的数据动态的采集出来,那不就相当于给 data 中定义的 form 加了一层过滤吗?

所以能够完美的解决我的需求。

那么,问题是在 vue 中如何使用 form 的 submit 来获取数据呢?

首先,我们有一个 form 表单,表单所有的元素都有 name 属性。

<form action="####" @submit.prevent="submitform" ref="form">
	<el-input type="text" v-model="username" name="username">
	<el-select v-model="userRole" placeholder="请选择" name=""userRole>
	    <el-option
	      v-for="item in userRoleList"
	      :key="item.value"
	      :label="item.label"
	      :value="item.value">
	    </el-option>
	</el-select>
	<el-checkbox v-model="ifLoginForbid" name="ifLoginForbid">禁止登录?</el-checkbox>
	<input type="submit" value="" v-show="false" @click="submitform">
</form>
复制代码

然后,通过手动调用 this.submitform() 来获取 form 表单中的数据

...
methods: {
	submitform(){
              // 通过 FormData 取得相应的 form 上的数据
              const formData = new FormData(this.$refs['form'])
	      const data = {}
	      // entries返回一个 iterator对象 ,此对象可以遍历访问FormData中的键值对
	      for (let [key, val] of formData.entries()) {
	        console.log([key, val] )
	        Object.assign(data, { [key]: val })
	      }
	      return data // {username: ''username'', userRole: 1}
	}
}
复制代码

疑?? 我的 ifLoginForbid 去了哪里~~打印下看看

console.log(formData.getKey('ifLoginForbid'))
// null
复制代码

是个 null值,这就离谱了。

查看下元素,发现 checkbox 是未选中的状态,那是不是应为没选中的原因导致 formData 根本没有拿到这个数据呢?

那我勾选这个 checkbox 后再测试一波

console.log(formData.getKey('ifLoginForbid'))
// ''
复制代码

汰!这不科学啊,居然是个空字符!checkbox 绑定的不应该是个 boolean 类型的值吗?

再次查看元素,看看是哪个刁民又在害我。

发现选中状态的 el-checkbox 里的 input 是这样:

<input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
复制代码

这是组件变异太深了吗? 没有探入的去研究。但我知道正常的 input 大概是这样:

<input type="checkbox" :checked="checked" :name="name" @change="change" :value="checked"/>
复制代码

所以依照上面的规则,我自己实现了一个 myCheckbox 组件:

<template>
   <input type="checkbox" 
        :name="name" 
   	:checked="checked" 
   	:value="checked"
   	@change="change" />
</template>

<script>
export default {
  props: {
    checked: {
      type: Boolean
    },
    name: {
      type: String
    }
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  methods: {
    change(e) {
      this.$emit('change', e.target.checked)
    }
  }
}
</script>
复制代码

在父组件里使用:

<component :is="'myCheckbox'" v-model="checked" :name="'ifLoginForbid'" />
复制代码

再次查看formData.getKey('ifLoginForbid') // true

成功了,这次我们成功的获取到了页面所有的表单元素的数据,生成了要提交给后台的 data。

nice~~

分类:
前端
标签: