Vue+ElementUI はフォームの動的なレンダリングと視覚的な構成を実装します

この記事では、動的レンダリングとフォームの視覚的な構成を実現するための Vue+ElementUI の方法を主に紹介します。必要な友人はそれを参照してください。

動的レンダリングとは、おそらく次のような非同期データを持つことを意味します。この json を配置するには、次のようにレンダリングされます:

最後に送信されたフォーム データは次のようになります:

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

実装 始める前に、 v-model 原則の仕組みを知る必要があります:

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

これは、次の例の糖衣構文にすぎません:

<input v-model="something">

これを理解した後、このコンポーネントを段階的に実装しましょう。

まず、設定を el-form に転送します:

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

次に、デフォルト値を設定します。

各 form-item には v-model が必要なので、レンダリングする前に、各フィールドに値があることを確認してください。ここで注意すべき点の 1 つは、コンポーネントは親コンポーネントによって渡された prop を直接変更してはいけないということです。そのため、 {...this.value} を使用してそれをここにすばやくコピーし、最後に変更しません。親コンポーネントへの通知を忘れないでください。コードは次のとおりです:

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

3 番目のステップは、フォーム項目をレンダリングすることです。 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 === &#39;input&#39;" />
 <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===&#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>

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，所以这里我们还是转发一下。

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===&#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>

完整代码： 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

次のデータを使い慣れた el-form-item にレンダリングするにはどうすればよいですか?

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

1 つ目の方法は、Vue の組み込みコンポーネント コンポーネントを使用することです。これは次のように記述できます:

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

2 つ目の方法は、v-if を使用して 1 つずつ判断することです:

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

各フォーム コントロールは大きく異なるため、著者は 2 番目の方法を採用しています。

このアイデアに従って、dynamic-form-item をカプセル化し、項目を受け取り、el-form-item をレンダリングします。

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

ヒント: v-bind=" を使用します。 $ attrs" v-on="$listeners" は、親コンポーネントの v-model ディレクティブを簡単に転送できます。詳細については、vue の上位コンポーネントを参照してください。

最後に、完全なフォームをループアウトできます:

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

v-model="value[item.key]" はここでは使用できません 前述したように、コンポーネントを直接使用することはできません props を変更します。 、ここに転送します。

rrreee

完全なコードアドレス: src/components/dynamic-form/form.vue

拡張機能

1. 数値表示単位、小数点以下の桁数が制限されています

element -ui にはこの機能はありませんが、非常に一般的だと思うので、el-input を使用して input-number を手動でカプセル化しました:

rrreee

完全なコード: src/components/dynamic-form/input-number.vue🎜🎜🎜🎜 2. 非同期検証🎜🎜🎜🎜 async-validator のおかげで、検証ルールを簡単にカスタマイズできます。 🎜🎜 🎜🎜設定内🎜rrreee🎜in Dynamic-form-item コンポーネントで、item.rules をトラバースし、SQL 検証をカスタム バリデーター関数に変換します: 🎜rrreee🎜3. 省と都市のクイック構成🎜🎜 element-china-area- の作者に感謝します。データ 。 🎜🎜設定内:🎜rrreee🎜 動的フォーム項目コンポーネント内:🎜rrreee🎜4. リモートからのオプションのロード🎜🎜ラジオ、チェックボックス、カスケード、選択が含まれますが、これらに限定されません🎜🎜設定内:🎜rrreee🎜In Dynamic-form-item コンポーネント: 🎜rrreee🎜 以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜mongodbデータベースに接続するnodejsメソッドの例🎜🎜🎜🎜iviewでのセレクタの複数選択検証方法🎜🎜🎜🎜Axios要素を使用してグローバルリクエストロードメソッドを実装する🎜🎜

以上がVue+ElementUI はフォームの動的なレンダリングと視覚的な構成を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。