z-element-ui

# form-item

# 描述

z-elment-ui 将el-form-item 进行了二次封装,整合了常用的form表单组件,添加相关的配置即可.

点击查看代码 
<!-- @format -->

<template>
  <el-form :model="form" :rules="rules" ref="form" v-bind="$attrs" :label-width="'180px'" label-suffix=":->">
    <zFormItem v-for="(item, index) in formList" :key="item.label" v-bind="item">
      <template v-if="item.prop === 'name'" #label>
        <span>label插槽</span>
      </template>
    </zFormItem>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import zCustomtDemo from './zCustomtDemo.vue';
export default {
  name: 'zFormItemDemo',
  components: {
    zCustomtDemo
  },
  data() {
    return {
      form: { age1: '20' },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ]
      },
      formList: [
        {
          prop: 'name',
          render: 'el-input',
          option: {
            class: 'border',
            style: {
              width: '200px'
            }
          },
          slots: {
            suffix: () => <i>尾部</i>,
            prepend: () => 'Http:/'
          },
          on: {
            input: (e) => {
              console.log('input', e);
            },
            change: (e) => {
              console.log('change', e);
            }
          },
          defaultValue: '1'
        },
        {
          prop: 'check_in',
          render: 'el-time-select',
          label: '使用el-time-select',
          option: {
            'picker-options': {
              start: '08:30',
              step: '00:15',
              end: '10:30'
            },
            placeholder: '选择打卡时间1'
          }
        },
        {
          prop: 'check_num',
          render: 'el-input-number',
          label: '使用el-input-number',
          option: {
            min: 1,
            max: 10,
            step: 1,
            'step-strictly': true,
            precision: 0,
            'controls-position': 'right',
            placeholder: '请输入打卡次数'
          }
        },
        {
          prop: 'switch',
          label: '开关',
          isTag: false,
          render: '将isTag设置为false,则不会被包裹在el-form-item中，将会被直接渲染',
          defaultValue: false
        },
        {
          prop: 'chekbox',
          label: '使用z-checkbox',
          render: 'z-checkbox',
          option: {
            multiple: true,
            data: [
              { label: '18', value: '18', disabled: true },
              { label: '19', value: '19' },
              { label: '20', value: '20' }
            ]
          },
          defaultValue: ['20']
        },
        {
          prop: 'custom-select',
          label: '引入自定义组件',
          render: 'zCustomtDemo'
        },
        {
          prop: 'age',
          label: '年龄',
          render: 'z-select',
          option: {
            data: [19, 20, 21],
            placeholder: '请输入年龄'
          },
          defaultValue: 20
        },
        {
          prop: 'age1',
          label: 'string数据',
          render: 'z-select',
          option: {
            data: '1, 2, 3',
            placeholder: '请输入年龄'
          },
          defaultValue: '1'
        },
        {
          prop: 'type',
          label: '类型',
          render: 'z-select',
          option: {
            props: { label: 'a', value: 'b' },
            data: [
              { a: 'MAN', b: '18', disabled: true },
              { a: 'MISS', b: '19' },
              { a: 'emmm', b: '20' }
            ],
            placeholder: '请输入年龄'
          },
          defaultValue: '20'
        },
        {
          prop: 'age1',
          label: '年龄1',
          render: 'z-radio',
          option: {
            data: () => {
              return new Promise((resolve) => {
                setTimeout(() => {
                  resolve([
                    { label: '18', value: '18', disabled: true },
                    { label: '19', value: '19' },
                    { label: '20', value: '20' }
                  ]);
                }, 1000);
              });
            },
            placeholder: '请输入年龄'
          },
          defaultValue: '20'
        }
      ]
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
          console.log('🚀 ~ this.form', this.form);
        } else {
          this.$message.error('提交失败');
          return false;
        }
      });
      console.log(this.form, this.$attrs);
    }
  }
};
</script>

提示

如果想在 z-form-item中使用el-element中的组件,按照数据格式来进项相关设置即可,option中可进行相关属性绑定,实例中有体现. 如果使用z-select z-radio z-checkbox等,需要为组件提供data. 其他属性与使用的组件有关,比如使用el-button时设置其大小,option为{ size:'mini' }

注意

设置默认值时直接对form对象赋值,会覆盖defaultValue的值.

# 属性介绍

字段名称 描述 格式
prop 绑定form的字段名，涵盖了el-form-item中prop字段的作用,并且通过此字段实现form表单响应式数据流 String
render 组件名称或者渲染函数(jsx) String, Function
label? 表单标签名,可以为空,为空则不显示标签,如果在el-form上设置过label-width此时会有占位,可以单独给该表单项设置一个 label-width:0 取消占位 String
defaultValue 默认值，如果data数据为promise推荐使用直接给form进行赋值. --
isTag 默认为true,当 isTag:false时 render 将会被作为文本输出 Boolean
option 该组件的配置,如el-option 的disabled placeholder 等等,如果是z-select 需要选项的数据,则需要添加data Object,根据组件不同添加相关的配置.
on 绑定到该组件的事件 Object
slots 组件的插槽 Object
更多... 继承el-form-item中的属性,如show-message inline-message el-form-item属性 | Element (opens new window)

# on与slots

放入on 对象中的方法,都将被绑定到当前组件上,例如el-input 的input事件,可以这样配置:

on:{
	input:(e)=>{
		console.log(e)
	}
}

slots 的作用是用来补充数据配置状态下 z-form-item 无法完成的功能,例如el-input 中的 suffix 插槽等,例如:

slots:{
	suffix:()=> <i>这是尾部文字<i>,
	prepend:'这是头部文字'
}

← Select →