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

{ "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 } ] } ]}

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

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

<input v-model="something">

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

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

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() },}

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

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

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

<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)" />

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

<!--普通使用--><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>

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

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

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

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

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

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