Vue+ElementUI实现表单动态渲染、可视化配置的方法


Posted in Javascript onMarch 07, 2018

动态渲染就是有一个异步的数据,大概长这样:

{
 "inline": true,
 "labelPosition": "right",
 "labelWidth": "",
 "size": "small",
 "statusIcon": true,
 "formItemList": [
 {
 "type": "input",
 "label": "姓名",
 "disable": false,
 "readonly": false,
 "value": "",
 "placeholder": "请输入姓名",
 "rules": [],
 "key": "name",
 "subtype": "text"
 },
 {
 "type": "radio",
 "label": "性别",
 "value": "",
 "button": false,
 "border": true,
 "rules": [],
 "key": "gender",
 "options": [
 {
  "value": "1",
  "label": "男",
  "disabled": false
 },
 {
  "value": "0",
  "label": "女",
  "disabled": false
 }
 ]
 }
 ]
}

然后你需要把这个json渲染成这样:

Vue+ElementUI实现表单动态渲染、可视化配置的方法 

最后提交表单的数据长这样:

{
 "name": "Genji",
 "gender": "1"
}

然后我们目标就是封装这样一个组件:

<dynamic-form :config="someConfig" v-model="someData" />

实现

开始之前,你需要知道 v-model 的工作原理 :

<input v-model="something">

这不过是以下示例的语法糖:

<input
 :value="something"
 @input="something = $event.target.value">

了解这些后,我们再来一步一步实现这个组件。

首先,把配置转发到 el-form :

<template>
 <el-form 
 class="dynamic-form" 
 :inline="formConfig.inline" 
 :model="value" 
 :label-position="formConfig.labelPosition" 
 :label-width="formConfig.labelWidth" 
 :size='formConfig.size' 
 :status-icon="formConfig.statusIcon">
 <slot/>
 </el-form>
</template>
<script>
export default {
 props: {
 formConfig: {
 type: Object,
 required: true
 },
 value: {
 type: Object,
 required: true
 }
 },
}
</script>

第二步,设置默认值。

因为在每个 form-item 都会需要一个 v-model ,所以在渲染之前,保证每个字段都有值。这里需要注意一点,组件内不要直接修改父组件传入的 prop ,所以我们在这里用 {...this.value} 快速拷贝一份,最后别忘了通知父组件。代码如下:

export default {
 props: {
 formConfig: {...},
 value: {...},
 },
 methods: {
 setDefaultValue() {
 const formData = { ...this.value }
 // 设置默认值
 this.formConfig.formItemList.forEach(({ key, value }) => {
 if (formData[key] === undefined || formData[key] === null) {
  formData[key] = value
 }
 })
 this.$emit('input', formData)
 }
 },
 mounted() {
 this.setDefaultValue()
 },
}

第三步,渲染 form-item 。

如何把下面的数据渲染为我们熟悉的 el-form-item ?

{
 "type": "input",
 "label": "姓名",
 "disable": false,
 "readonly": false,
 "value": "",
 "placeholder": "请输入姓名",
 "rules": [],
 "key": "name",
 "subtype": "text"
}

第一种,利用 vue 内置的 component 组件,写起来可能像这样:

<el-form-item>
 <component :is="`el-${item.type}`" />
</el-form-item>

第二种,使用 v-if 逐个判断:

<el-form-item>
 <el-input v-if="item.type === 'input'" />
 <span v-else>未知控件类型</span>
</el-form-item>

考虑到每种表单控件的处理逻辑千差万别,楼主采用了第二种方式。

根据这个思路,我们来封装一个 dynamic-form-item ,接收一个 item ,渲染一个 el-form-item :

<template>
 <el-form-item :rules="item.Rules" :label="item.label" :prop="item.key">
 <el-input 
 v-if="item.type==='input'" 
 v-bind="$attrs" v-on="$listeners" 
 :type="item.subtype" 
 :placeholder="item.placeholder" 
 :disabled="item.disable" 
 :readonly="item.readonly" 
 :autosize="item.autosize"></el-input>
 <el-select 
 v-else-if="item.type==='select'" 
 v-bind="$attrs" v-on="$listeners"
 :multiple="item.multiple" 
 :disabled="item.disabled" 
 :multiple-limit="item.multipleLimit">
  <el-option 
  v-for="o in item.options" 
  :key="o.value" 
  :label="o.label" 
  :value="o.value" 
  :disabled="o.disabled">
  </el-option>
 </el-select>
 <!--突然有点想念JSX-->
 ...
 <span v-else>未知控件类型</span>
 </el-form-item>
</template>
<script>
export default {
 props: {
 item: {
 type: Object,
 required: true
 }
 }
}
</script>

tips: 使用 v-bind="$attrs" v-on="$listeners" 可以方便地转发父组件的 v-model 指令,详见vue高阶组件。

最后,我们就可以循环输出一个完整的表单了:

<dynamic-form-item
 v-for="item in formConfig.formItemList"
 :key="item.key"
 v-if="value[item.key]!==undefined"
 :item="item"
 :value="value[item.key]"
 @input="handleInput($event, item.key)" />

这里不能用 v-model="value[item.key]" ,上文说了,组件内不能直接修改props,所以这里我们还是转发一下。

methods: {
 handleInput(val, key) {
 // 这里element-ui没有上报event,直接就是value了
 this.$emit('input', { ...this.value, [key]: val })
 },
 setDefaultValue() {...}
},

完整代码地址:  src/components/dynamic-form/form.vue

扩展功能

1.数字显示单位,限制小数位数

element-ui 没有做这个功能,不过我觉得还是挺常见的,所以使用 el-input 手动封装了一个 input-number :

Vue+ElementUI实现表单动态渲染、可视化配置的方法 

<!--普通使用-->
<input-number 
 v-model="someNumber"
 :min="1" 
 :max="99" 
 :decimal1="2" 
 append="元"></input-number>
<!--在dynamic-form-item中的应用-->
<input-number 
 v-else-if="item.type==='number'" 
 v-bind="$attrs" v-on="$listeners" 
 :min="item.min" 
 :max="item.max" 
 :decimal1="item.decimal1" 
 :append="item.append" 
 :prepend="item.prepend" 
 :disabled="item.disabled"></input-number>

完整代码: src/components/dynamic-form/input-number.vue

2.异步验证

得益于 async-validator ,我们可以很方便地自定义验证规则。

Vue+ElementUI实现表单动态渲染、可视化配置的方法 

在配置中

{
 "type": "input",
 ...
 "rules":[
  {
   "sql": "SELECT {key} FROM balabala",
   "message": "xx已被占用",
   "trigger": "blur"
  }
 ]
}

dynamic-form-item 组件中, 遍历 item.rules , 将sql验证转化为自定义 validator 函数:

<template>
 <el-form-item :rules="Rules" >
  ...
 </el-form-item>
</template>
<script>
import request from '@/utils/request'
export default {
 props: {
 item: {...}
 },
 computed: {
 Rules() {
  const rules = this.item.rules
  if (rules === undefined) return undefined
  const R = []
  rules.forEach(rule => {
  if (rule.sql) {
   const validator = (rule2, value, callback) => {
   // 根据项目自行修改
   request('/api/validate', 'POST', {
    key: rule2.field,
    value,
    sql: rule.sql.replace(/{key}/ig, rule2.field)
   })
    .then(res => {
    callback(!res || undefined)
    })
    .catch(err => {
    this.$message.error(err.message)
    callback(false)
    })
   }
   R.push({ validator, message: rule.message, trigger: 'blur' })
  } else {
   R.push(rule)
  }
  })
  return R
 }
 },
}
</script>

3.省市区快捷配置

感谢 element-china-area-data 的作者。

在配置中:

{
 "type": "cascader",
 ...
 "areaShortcut": "provinceAndCityData"
}

在 dynamic-form-item 组件中:

<template>
 <el-form-item>
  ...
  <el-cascader 
   :options="item.options || require('element-china-area-data')[item.areaShortcut]"
   ></el-cascader>
 </el-form-item>
</template>

4.从远程加载选项

包括但不限于 radio 、 checkbox 、 cascader 、 select

在配置中:

{
 "type": "checkbox",
 ...
 "optionsUrl": "/api/some/options"
}

在 dynamic-form-item 组件中:

<template>
 <el-form-item>
  ...
  <el-select>
   <el-option 
    v-for="o in item.options || ajaxOptions"
    ></el-option>
  </el-select>
 </el-form-item>
</template>
<script>
import request from '@/utils/request'
export default {
 props: {
 item: {...}
 },
 computed: {...},
 data() {
 return {
  ajaxOptions: []
 }
 },
 created() {
 const { optionsUrl, key, type } = this.item
 if (optionsUrl) {
  // 根据项目自行修改
  request(`${optionsUrl}?key=${key}`, 'GET')
  .then(res => {
   this.ajaxOptions = res
  })
  .catch(err => { this.$message.error(err.message) })
 }
 }
}
</script>

总结

以上所述是小编给大家介绍的Vue+ElementUI实现表单动态渲染、可视化配置的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery代码优化 选择符篇
Nov 01 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 #Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 #Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 #Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 #Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 #Javascript
关于Vue的路由权限管理的示例代码
Mar 06 #Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 #Javascript
You might like
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP实现的策略模式示例
2019/03/20 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python实现井字棋游戏
2020/03/30 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python中zip函数如何使用
2020/06/04 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
女方婚礼新郎答谢词
2014/01/11 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
python基础之文件操作
2021/10/24 Python
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android