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>
複製代碼