Vue+ElementUI實現(xiàn)表單動態(tài)渲染、可視化配置的方法

更新時間：2018年03月07日 09:26:39 作者：博文

這篇文章主要介紹了Vue+ElementUI實現(xiàn)表單動態(tài)渲染、可視化配置的方法,需要的朋友可以參考下

動態(tài)渲染就是有一個異步的數(shù)據(jù)，大概長這樣：

{
 "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渲染成這樣：

最后提交表單的數(shù)據(jù)長這樣：

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

然后我們目標就是封裝這樣一個組件：

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

實現(xiàn)

開始之前，你需要知道 v-model 的工作原理：

<input v-model="something">

這不過是以下示例的語法糖：

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

了解這些后，我們再來一步一步實現(xiàn)這個組件。

首先，把配置轉發(fā)到 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 。

如何把下面的數(shù)據(jù)渲染為我們熟悉的 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>

考慮到每種表單控件的處理邏輯千差萬別，樓主采用了第二種方式。

根據(jù)這個思路，我們來封裝一個 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" 可以方便地轉發(fā)父組件的 v-model 指令，詳見vue高階組件。

最后，我們就可以循環(huán)輸出一個完整的表單了：

<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，所以這里我們還是轉發(fā)一下。

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

完整代碼地址： src/components/dynamic-form/form.vue

擴展功能

1.數(shù)字顯示單位，限制小數(shù)位數(shù)

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 ，我們可以很方便地自定義驗證規(guī)則。

在配置中

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

在 dynamic-form-item 組件中, 遍歷 item.rules , 將sql驗證轉化為自定義 validator 函數(shù):

<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) => {
   // 根據(jù)項目自行修改
   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.省市區(qū)快捷配置

感謝 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) {
  // 根據(jù)項目自行修改
  request(`${optionsUrl}?key=${key}`, 'GET')
  .then(res => {
   this.ajaxOptions = res
  })
  .catch(err => { this.$message.error(err.message) })
 }
 }
}
</script>

總結

以上所述是小編給大家介紹的Vue+ElementUI實現(xiàn)表單動態(tài)渲染、可視化配置的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

Element-ui tree組件自定義節(jié)點使用方法代碼詳解
本文通過實例代碼給大家介紹了Element-ui tree組件自定義節(jié)點使用方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
vxe-table中vxe-grid(高級表格)的使用方法舉例
vxe-table是一個基于vue的表格組件,下面這篇文章主要給大家介紹了關于vxe-table中vxe-grid(高級表格)的使用方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-05-05
Vue中的匿名插槽與具名插槽詳解
這篇文章主要為大家介紹了Vue中的匿名插槽與具名插槽，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
Vue框架中正確引入JS庫的方法介紹
最近在學習使用vue框架，在使用中遇到了一個問題，查找相關資料終于找了正確的姿勢，所以這篇文章主要給大家介紹了關于在Vue框架中正確引入JS庫的方法，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
4種方案帶你探索Vue代碼復用的前世今生
我們所熟知的Vue.js也在如何提取公共代碼復用方面也一直在探索優(yōu)化，本文小編就來和各位聊聊Vue.js代碼復用的前世今生，希望對大家學習Vue有一定的幫助
2023-05-05
基于Vue實現(xiàn)圖片在指定區(qū)域內移動的思路詳解
這篇文章主要介紹了基于Vue實現(xiàn)圖片在指定區(qū)域內移動，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11
vue3?證件識別上傳組件封裝功能
證件圖片識別上傳根據(jù)業(yè)務需要，經(jīng)常涉及到證件上傳，例如身份證上傳、銀行卡、營業(yè)執(zhí)照等信息，根據(jù)設計師的設計，單獨封裝了一個上傳組件，這篇文章主要介紹了vue3?證件識別上傳組件封裝,需要的朋友可以參考下
2023-05-05
vite.config.ts配置之自動導入element-puls方式
這篇文章主要介紹了vite.config.ts配置之自動導入element-puls方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
分享9個Vue的巧妙冷技巧
這篇文章主要介紹了分享9個Vue的巧妙冷技巧，文章首先通過巧用$attrs和$listeners的技巧展開，具有一定的參考價值，需要的小伙伴可以參考一下
2022-06-06
vue 使用Jade模板寫html,stylus寫css的方法
這篇文章主要介紹了vue 使用Jade模板寫html，stylus寫css的方法,文中還給大家提到了使用jade注意事項，需要的朋友可以參考下
2018-02-02