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

时间  2019-11-06
标签 vue+elementui vue elementui 实现 表单 动态 渲染 可视化 配置 栏目 HTML 繁體版
原文   原文链接

写在前面

前些日子碰到了动态渲染表单的需求，在这里记录一下，也许能帮到你们。javascript

本文着重梳理动态渲染思路，关于超级表单，因为还不够完善，就不作赘述。html

GitHub: github.com/bowencool/s…vue

动态渲染

动态渲染就是有一个异步的数据，大概长这样：java

{
  "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渲染成这样： git

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

{
    "name": "Genji",
    "gender": "1"
}
复制代码

而后咱们目标就是封装这样一个组件：github

<dynamic-form :config="someConfig" v-model="someData" />
复制代码

实现

开始以前，你须要知道v-model的工做原理：ajax

<input v-model="something">
复制代码

这不过是如下示例的语法糖：sql

<input
  :value="something"
  @input="something = $event.target.value">
复制代码

了解这些后，咱们再来一步一步实现这个组件。element-ui

首先，把配置转发到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}快速拷贝一份，最后别忘了通知父组件。代码以下：json

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>
    
    ...

    <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，因此这里咱们仍是转发一下input事件。

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:

<!--普通使用-->
<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，咱们能够很方便地自定义验证规则。

在配置中 

{
    "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>
复制代码

完

第一次写文章，但愿能帮到你们，也欢迎提出建议。 文末再贴个GitHub地址，若是能给个Star，那可真真是极好的 =)

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程