Vue+ElementUI實現表單動態渲染、視覺化配置

博文發表於2019-03-04
VueUI視覺化

寫在前面

前些日子碰到了動態渲染表單的需求，在這裡記錄一下，也許能幫到大家。

本文著重梳理動態渲染思路，關於超級表單，由於還不夠完善，就不做贅述。

GitHub: github.com/bowencool/s…

動態渲染

動態渲染就是有一個非同步的資料，大概長這樣：

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

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

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>
複製程式碼

完

第一次寫文章，希望能幫到大家，也歡迎提出建議。
文末再貼個GitHub地址，如果能給個Star，那可真真是極好的 =)

相關文章