vue js element-ui el-form表单封装 二次封装

这是一个封装了表单组件的思想。它使用了Vue.js框架和Element UI库来创建可复用的表单组件。该组件接受props作为输入，包括表单的各种配置项和数据。根据配置项的不同，组件内部会生成对应的表单元素，如输入框、下拉框、单选框、复选框等。同时，组件还提供了上传附件和预览功能。

该封装思想的优点在于可以减少代码的冗余，提高代码的复用性和维护性。通过将表单的配置项和数据作为props进行输入，可以在使用组件的地方轻松定制表单的样式和行为，同时也可以方便地对表单的数据进行处理和提交。

总体来说，该封装思想利用了Vue.js的组件化和响应式原理，使得表单的开发和使用更加简洁高效。 新增 编辑 详细 通用    废话不多说直接上代码  

form组件

//引用

vabForm.js

export const rules = () => {
  return [
    {
      field: 'id',
      type: 'select',
      label: '部门',
      multiple:false,
      placeholder: '请选择部门',
      colWidth: 'el-col-10',
      options: [
        {
          label: '部门一',
          value: 90000,
        },
        {
          label: '部门二',
          value: 50000,
        }
      ],
      rules: [
        {
          required: true,
          message: '请选择部门',
          trigger: 'change'
        },
      ]
    },
    {
      field: 'id1',
      type: 'select',
      label: '部门1',
      multiple:false,
      placeholder: '请选择部门1',
      colWidth: 'el-col-10',
      options: [
        {
          label: '部门一1',
          value: 2345678,
        },
        {
          label: '部门二2',
          value: 6543450,
        }
      ],
      rules: [
        {
          required: true,
          message: '请选择部门',
          trigger: 'change'
        },
      ]
    },
    {
      field: 'name',
      label: '用户名',
      placeholder: '请输入活动名称',
      type: 'input',
      maxLenght: 20,
      colWidth: 'el-col-24',
      rules: [
        { required: true, message: '请输入活动名称', trigger: ['blur', 'change'] },
      ]
    },
    {
      field: 'radioId',
      type: 'radio',
      label: '备选项',
      colWidth: 'el-col-24',
      options: [
        {
          label: '选项一',
          value: '1',
        },
        {
          label: '选项二',
          value: '2',
        }
      ],
      rules: [
        {
          required: true,
          message: '请选择备选项',
          trigger: 'blur'
        },
      ]
    },
    {
      field: 'checkboxId',
      type: 'checkbox',
      label: '状态',
      colWidth: 'el-col-24',
      cities: ['上海', '北京', '广州', '深圳'],
      rules: [
        {
          required: true,
          message: '请选择状态',
          trigger: 'change'
        },
      ]
    },

    {
      field: 'textareaIner',
      label: '内容',
      placeholder: '请输入内容',
      maxLenght: 300,
      type: 'textarea',
      rowsHeight: 4,
      colWidth: 'el-col-24',
      rules: [
        { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
      ]
    },
    {
      field: 'dateTime',
      label: '内容',
      placeholder: '请输入内容',
      type: 'date',
      pickerOptions: pickerOptions(),
      colWidth: 'el-col-24',
      rules: [
        { required: true, message: '请输入内容', trigger: 'blur' }
      ]
    },
    {
      field: 'uploadList',
      label: '附件',
      headers: {},
      action: '/action',
      type: 'upload',
      multiple: true,
      colWidth: 'el-col-24',
      rules: [
        { required: true, message: '请上传附件', trigger: ['blur', 'change'] },
        callback()
      ]
    },
  ]
}

function callback() {
  return {
    validator: function (rule, value, callback) {
      console.log(rule, value);
      if (value) {
        callback()
      }
    }
  }
}
function pickerOptions() {
  return {
    disabledDate(time) {
      return time.getTime() > Date.now();
    },
    shortcuts: [{
      text: '今天',
      onClick(picker) {
        picker.$emit('pick', new Date());
      }
    }, {
      text: '昨天',
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24);
        picker.$emit('pick', date);
      }
    }, {
      text: '一周前',
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', date);
      }
    }]
  }
}