vue動態渲染表單配置項

在項目中，我們經常會用到各種表單，但是數量一般都不多，那當我們編寫大量表單時怎么辦呢，難道我們還要一個標簽一個標簽的寫嗎？如果各個表單之間又出現了各種級聯關系各種判斷呢？所以這時候就出現了另外一種方式，我們可以通過對象的方式編寫表單項來替換element本來的標簽寫法，以使我們能夠方便清晰的最大化的控制每個表單。

當我們編寫一個普通的input表單時，我們一般會直接在template里這樣寫：

<el-input v-model="inputValue" placeholder="請輸入"></el-input>

用了表單配置項后，我們可以這樣在data里寫：

{
  type: 'input',
  key: 'inputValue',
  label: 'input框：',
  placeholder: '請輸入'
}

我們先不討論怎么就可以這樣寫了，我們先來明白為什么要這樣用

• 可以通過this.XXX來改變某個表單項
• 不用再在標簽里加各種判斷
• 標簽寫法太死板
• render寫法，更貼近vue底層

如何配置

input舉栗，最后會附上其他的表單項

// 準備一個文件---itemRenders.js
export default {
  name: 'ItemRender',
  props: {
    // 類型，input or select or ...
    type: String,
    // 主要配置項
    config: Object
  },
  // 渲染函數
  render: function (h) {
    switch (this.type) {
      case 'input':
        return inputItem(h, this.config);
      default:
        return '';
    }
  }
};  

function inputItem(h, config) {
  let {
    key, // 綁定的值
    props, // 屬性, 如disable等
    listeners, // 事件，如onblur等
    placeholder,
    areaProps // 額外屬性如type等
  } = config;
  let on = listeners || {};
  let pps = props || {};
  let area = areaProps || {};
  return h('el-input', {
    props: {
      ...pps,
      value: key,
      disabled: pps.disabled
    },
    attrs: {
      placeholder: placeholder || pps.placeholder || '請輸入',
      ...area
    },
    on: {
      ...on,
      // 實現雙向綁定
      input: (val) => {
        key = val;
      }
    }
  });
}

如何使用

在.vue文件中使用itemRenders.js

<template>
    <div>
        <item-render
          :type="item.type"
          :config="{
            placeholder: item.placeholder || '',
            ...item.config,
            key: item.key
          }"
        >
        </item-render>
    </div>
</template>

<script>
    import ItemRender from './itemRenders';
    export default {
        components: { 'item-render': ItemRender },
        data() {
            return {
                item: {
                    type: 'input',
                     key: 'inputValue',
                     label: 'input框：',
                     placeholder: '請輸入',
                     config: {
                        props: {
                          disabled: true
                        },
                        listeners: {
                          blur: _this.blur1
                        }
                     }
                }
            }
        }
    }
</script>

這只是渲染一個input的寫法，但既然會用到這種寫法，那就代表要渲染的表單數量可能有點大，像我們項目中有些頁面新增時表單項多達100+，所以，如果頁面只用到個位數的表單的情況，這里還是建議親親直接使用ele提供的標簽寫法。

渲染大量表單

那渲染大量表單時要怎么配置呢？

其實也很簡單，套個form就行了（主要以提交form表單為主）

我們可以先來準備個form表單組件，用的時候只需引入該組件即可

// formRender.vue
<template>
  <el-form
    ref="formRender"
    :model="model"
    :rules="rules"
  >
    <div class="block">
      <el-form-item
        v-for="item in items"
        :key="item.key"
        :label="item.label"
        :prop="item.key"
      >
        <item-render
          :type="item.type"
          :config="{
            placeholder: item.placeholder || '',
            ...item.config,
            model,
            key: item.key
          }"
        >
        </item-render>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
    import ItemRender from './itemRenders';
    export default {
        components: { 'item-render': ItemRender },
        props: {
            model: {
              type: Object,
              default: () => {}
            },
            // 規則
            rules: {
              type: Object,
              default: () => {}
            },
            items: {
              type: Array,
              default: () => []
            }
        },
    }
</script>

項目中使用

<template>
    <FormRender
        ref="formRender"
        :model="form"
        :rules="basicRules"
        :items="items1"
      ></FormRender>
</template>
<script>
    import FormRender from './formRender';
    export default {
        components： {FormRender},
        data() {
            return {
                form: {
                    formItem1: '',
                    formItem2: [],
                    formItem3: ''
                },
                items1: [
                    // 輸入框
                    {
                        type: 'input',
                        key: 'formItem1',
                        label: 'formItem1：',
                        placeholder: '請輸入',
                    }，
                    // 下拉框
                    {
                        type: 'select',
                        key: 'formItem2',
                        label: 'formItem2：',
                        placeholder: '請選擇',
                        config: {
                            props: {
                              filterable: true,
                              clearable: true,
                              disabled: false
                            },
                            options: () => _this.formItem2s,
                            optionConfig: {
                              label: 'name',
                              value: 'code'
                            },
                            listeners: {
                              change: _this.handleChange
                            }
                      }
                    }
                ],
                basicRules: {
                    formItem1: [ { required: true, trigger: 'blur' }]
                },
                formItem2s: []
            }
         }
    }
</script>

其余表單配置項

這里只提供部分常用的給大家做參考，大家也可以從別的角度去考慮，適合我們的并不一定適合所有人

• 下拉選擇框

  function selectItem(h, config) {
  let {
    model,
    key,
    props,
    listeners,
    options,
    optionConfig,
    placeholder,
    syncConfig
  } = config;
  
  let opl = 'label';
  let opv = 'value';
  if (optionConfig) {
    if (optionConfig.label) {
      opl = optionConfig.label;
    }
    if (optionConfig.value) {
      opv = optionConfig.value;
    }
  }
  
  let opts = options();
  let ops = [];
  if (opts) {
    ops = opts.map((option) => {
      return h('el-option', {
        key: option[opv],
        props: {
          label: option[opl] || option['text'],
          value: option[opv],
          disabled: option.disabled
        }
      });
    });
  }
  
  let on = listeners || {};
  let pps = props || {};
  if (syncConfig) {
    pps = {
      ...pps,
      ...syncConfig()
    };
  }
  
  return h(
    'el-select', {
      props: {
        placeholder,
        ...pps,
        value: model[key]
      },
      on: {
        ...on,
        change: (val) => {
          model[key] = val;
          if (on.change) {
            on.change(val);
          }
        }
      }
    },
    ops
  );
  }
  

• 日期選擇器

  function dateItem(h, config) {
    let {
      model,
      key,
      props,
      listeners,
      placeholder,
      type
    } = config;
    let pps = props || {};
    let on = listeners || {};
    return h('el-date-picker', {
      props: {
        ...pps,
        value: model[key]
      },
      attrs: {
        placeholder: placeholder || pps.placeholder || '請輸入',
        type: type || 'date'
      },
      on: {
        ...on,
        input: (val) => {
          model[key] = val;
        }
      }
    });
  }
  

• 計數器

  function inputNumberItem(h, config) {
    let {
      model,
      key,
      props
    } = config;
    let pps = props || {};
    return h('el-input-number', {
      props: {
        ...pps,
        value: model[key]
      },
      on: {
        change: (val) => {
          model[key] = val;
        }
      }
    });
  }
  

• 上傳

  function uploadItem(h, config) {
    let {
      model,
      key,
      props,
      btnProps,
      listeners,
      iconProps
    } = config;
    let pps = props || {};
    let btnProp = btnProps || {};
    let iconProp = iconProps || {};
    let on = listeners || {};
    return h(
      'el-upload', {
        props: {
          ...pps,
          'file-list': model[key]
        },
        class: {
          upload_demo: true
        },
        on: {
          ...on
        }
      },
      [
        h(
          'el-button', {
            props: {
              ...btnProp,
              size: btnProp.size || 'small'
            }
          },
          [
            h('svg-icon', {
              style: iconProp.styles,
              props: {
                iconClass: iconProp.iconClass
              }
            }),
            '上傳'
          ]
        )
      ]
    );
  }
  

• 級聯選擇器

  function cascaderItem(h, config) {
    let {
      model,
      key,
      props,
      listeners,
      options,
      optionProps
    } = config;
    let ops = options();
    let on = listeners || {};
    let pps = props || {};
    return h('el-cascader', {
      props: {
        value: model[key],
        ...pps,
        options: ops,
        props: optionProps
      },
      on: {
        change: (val) => {
          model[key] = val;
          if (on.change) {
            on.change(val);
          }
        }
      }
    });
  }
  

• 時間選擇器

  function timePicker(h, config) {
    let {
      model,
      key,
      props,
      listeners,
      placeholder,
      type,
      syncConfig
    } = config;
    let pps = props || {};
    if (syncConfig) {
      pps = {
        ...pps,
        ...syncConfig()
      };
    }
    let on = listeners || {};
    return h('el-time-picker', {
      props: {
        ...pps,
        value: model[key]
      },
      attrs: {
        placeholder: placeholder || pps.placeholder || '請輸入',
        type: type || 'date'
      },
      on: {
        ...on,
        input: (val) => {
          model[key] = val;
        }
      }
    });
  }