Vue+ElementUI method to realize dynamic rendering and visual configuration of forms-JS Tutorial-php.cn

This article mainly introduces the method of Vue ElementUI to realize dynamic rendering and visual configuration of forms. Friends who need it can refer to it

Dynamic rendering means having asynchronous data, which probably looks like this:

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

Copy after login

Then you need to render this json like this:

The data of the final submitted form looks like this:

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

Copy after login

Then our goal is to encapsulate such a Component:

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

Copy after login

Implementation

Before you start, you need to know how v-model works:

<input v-model="something">

Copy after login

This is nothing more It is syntactic sugar for the following example:

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

Copy after login

After understanding this, let’s implement this component step by step.

First, forward the configuration to el-form:

<template>
 <el-form 
 class="dynamic-form" 
 :inline="formConfig.inline" 
 :model="value" 
 :label-position="formConfig.labelPosition" 
 :label-width="formConfig.labelWidth" 
 :size=&#39;formConfig.size&#39; 
 :status-icon="formConfig.statusIcon">
 <slot/>
 </el-form>
</template>
<script>
export default {
 props: {
 formConfig: {
 type: Object,
 required: true
 },
 value: {
 type: Object,
 required: true
 }
 },
}
</script>

Copy after login

The second step, set the default value.

Because each form-item will require a v-model, so before rendering, ensure that each field has a value. One thing to note here is that the prop passed in by the parent component should not be directly modified within the component, so we use {...this.value} to quickly make a copy, and finally don’t forget to notify the parent component. The code is as follows:

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(&#39;input&#39;, formData)
 }
 },
 mounted() {
 this.setDefaultValue()
 },
}

Copy after login

The third step is to render form-item.

How to render the following data into the familiar el-form-item?

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

Copy after login

The first one, using vue’s built-in component component, may be written like this:

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

Copy after login

The second one, use v-if to judge one by one:

<el-form-item>
 <el-input v-if="item.type === &#39;input&#39;" />
 <span v-else>未知控件类型</span>
</el-form-item>

Copy after login

Consider Since the processing logic of each form control is very different, the author adopted the second method.

According to this idea, we encapsulate a dynamic-form-item , receive an item, and render an el-form-item:

<template>
 <el-form-item :rules="item.Rules" :label="item.label" :prop="item.key">
 <el-input 
 v-if="item.type===&#39;input&#39;" 
 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===&#39;select&#39;" 
 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>

Copy after login

tips: Use v-bind="$attrs" v-on="$listeners" You can easily forward the v-model directive of the parent component. For details, see vue high-order components.

Finally, we can loop out a complete form:

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

Copy after login

Cannot be used herev-model="value[item.key]" , above As mentioned, props cannot be modified directly within the component, so we will forward it here.

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

Copy after login

Full code address: src/components/dynamic-form/form.vue

##Extended functions

1. Number display unit, limit the number of decimal places

element-ui does not have this function, but I think it is quite common, so I used el-input to manually encapsulate it An 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===&#39;number&#39;" 
 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>

Copy after login

Full code:

src/components/dynamic-form/input-number.vue

2. Asynchronous verification

Thanks to async-validator, we can easily customize verification rules.

In the configuration

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

Copy after login

In the

dynamic-form-item component, traverse item.rules and convert sql verification into Custom validator function:

<template>
 <el-form-item :rules="Rules" >
  ...
 </el-form-item>
</template>
<script>
import request from &#39;@/utils/request&#39;
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(&#39;/api/validate&#39;, &#39;POST&#39;, {
    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: &#39;blur&#39; })
  } else {
   R.push(rule)
  }
  })
  return R
 }
 },
}
</script>

Copy after login

3. Province and city quick configuration

Thanks to the author of element-china-area-data.

In configuration:

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

Copy after login

In dynamic-form-item component:

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

Copy after login

4. Loading options from remote

Including but not limited to radio , checkbox, cascader, select

In the configuration:

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

Copy after login

In the dynamic-form-item component:

<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 &#39;@/utils/request&#39;
export default {
 props: {
 item: {...}
 },
 computed: {...},
 data() {
 return {
  ajaxOptions: []
 }
 },
 created() {
 const { optionsUrl, key, type } = this.item
 if (optionsUrl) {
  // 根据项目自行修改
  request(`${optionsUrl}?key=${key}`, &#39;GET&#39;)
  .then(res => {
   this.ajaxOptions = res
  })
  .catch(err => { this.$message.error(err.message) })
 }
 }
}
</script>

Copy after login

The above is what I compiled for everyone, I hope it will be used in the future Helpful to everyone.

nodejs example of method to connect to mongodb database

Select selector multi-selection verification method in iview

Using Axios Element to implement global request loading method

The above is the detailed content of Vue+ElementUI method to realize dynamic rendering and visual configuration of forms. For more information, please follow other related articles on the PHP Chinese website!