项目中常用到form表单提交，并加以校验，为了简化代码，对elementUI的form表单进行一次简单的组件封装。

页面大致如下：
在这里插入图片描述

直接上代码~~

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>element-table</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>
    <style>
      #app {
        margin-top: 100px;
      }
      .main-form {
        width: 40%;
        margin: 0 auto;
      }
      .submit-btn {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <form-component ref="form" :data="formData" :items="viewFormItems"></form-component>
      <div class="submit-btn">
        <el-button size="mini" type="primary" @click="submit">submit</el-button>
      </div>
    </div>
    <script>
      var formComponent = {
        template: `
          <el-form label-width="150px" :rules="rules" ref="items" :model="data">
            <div class="main-form">
              <div v-for="item in items" :key="item.label" :class="item.class || 'col-md-6'">
                <el-form-item :label="item.label + '：'" :prop="item.prop">
                  <el-input
                    v-if="item.type === 'input'" 
                    v-model="data[item.prop]"
                    :placeholder="item.props.placeholder || '请输入'"
                    :disabled="item.props.disabled || false"
                  ></el-input>
                  <el-select
                    v-if="item.type === 'select'" 
                    v-model="data[item.prop]"
                    :placeholder="item.props.placeholder || '请选择'"
                    :disabled="item.props.disabled || false"
                    style="width: 100%;"
                  >
                    <el-option
                      v-for="i in item.props.list"
                      :key="i.value"
                      :label="i.label"
                      :value="i.value"
                    ></el-option>
                  </el-select>
                  <el-switch
                    v-model="data[item.prop]"
                    v-if="item.type === 'switch'" 
                    :disabled="item.props.disabled || false"
                  ></el-switch>
                  <el-date-picker
                    v-model="data[item.prop]"
                    v-if="item.type === 'date'"
                    :disabled="item.props.disabled || false"
                    type="date"
                    :placeholder="item.props.placeholder || '请选择日期'"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </div>
            </div>
          </el-form>
        `,
        props: {
          formOption: Object,
          items: Array,
          data: Object
        },
        computed: {
          rules () {
            let rules = this.items.reduce((map, i) => {
              if (i.rules) {
                map[i.prop] = i.rules
              }
              return map
            }, {})
            return rules
          }
        },
        methods: {
          validate () {
            return new Promise((resolve) => {
              this.$refs.items.validate(resolve)
            })
          }
        }
      }


      var app = new Vue({
        el: '#app',
        components: {
          formComponent
        },
        data () {
          return {
            formData: {
              actType: true,
              actRegion: '',
              name: '',
              actDate: ''
            },
            viewFormItems: [
              {
                label: '活动名',
                prop: 'name',
                type: 'select',
                props: {
                  placeholder: '请选择活动名称',
                  list: [{
                    value: '选项1',
                    label: '黄金糕'
                  }, {
                    value: '选项2',
                    label: '双皮奶'
                  }]
                },
                rules: [
                  { required: true, message: '请选择活动名称', trigger: 'blur' }
                ]
              },
              {
                label: '活动区域',
                prop: 'actRegion',
                type: 'input',
                props: {
                  placeholder: ''
                },
                rules: [
                  { required: true, message: '请输入活动区域', trigger: 'blur' }
                ]
              },
              {
                label: '活动时间',
                prop: 'actDate',
                type: 'date',
                props: {
                  placeholder: ''
                }
              },
              {
                label: '活动性质',
                prop: 'actType',
                type: 'switch',
                props: {
                  placeholder: '',
                  disabled: true
                }
              },
            ]
          }
        },
        methods: {
          async submit () {
            if (!(await this.$refs.form.validate())) {
              return this.$message.error('请填写完整信息')
            }
            console.log(this.formData)
          }
        },
        mounted () {
        }
      })
    </script>
  </body>
</html>

此次只是简单的封装，可以直接拆开用到项目的vue文件中，剥离成公用的组件。这里功能还不完善，传参也不够友好，后续再补充，大概会加上upload组件，自定义校验逻辑，使用插槽slot，render-content以及优化封装等。。。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区