vue动态渲染表单配置项

2020-03-30 本文已影响0人彼得潘北北

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;
      }
    }
  });
}

vue动态渲染表单配置项

vue动态渲染表单配置项

如何配置

如何使用

渲染大量表单

项目中使用

其余表单配置项

猜你喜欢

热点阅读