Vue.js Element 表单使用

作者

QQ群：852283276
微信：arm80x86
微信公众号：青儿创客基地
B站：主页 https://space.bilibili.com/208826118

参考

Vue进阶（三十）：vue中使用element-ui进行表单验证
element-ui vue表单验证踩坑
Vue项目elementUI中封装表单验证
学习element中，觉得得多封装一下一些函数，比如form验证
Form 表单
javascript对数组和json数组的操作
JavaScript对数组操作。添加/删除/截取/排序/倒序
JavaScript对JSON数组操作。数组添加（push）以及移除（splitce）

典型表单

在上节Vue.js Element Basic组件使用的基础上，将官网的例子添加进来，修改了width，top属性，使界面整洁一点，

<template>
  <el-container>
    <el-container width="800px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
		...
    </el-container>
    <el-container style="position: absolute; top: 600px; bottom: 0px; width: 100%;">
      ...
    </el-container>
  </el-container>
</template>

脚本部分，

<script>
export default {
  data () {
    const item = {
      date: '2016-05-02',
      tabname: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tableData: Array(5).fill(item)
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

界面

可以看到，Form出来了，

点击立即创建，从chrome的Console中可以看到输出，

提交表单

安装vue-resource，

PS C:\dog\program\vue.js\helloworld> npm install --save vue-resource

修改src/main.js，

import VueResource from 'vue-resource'
Vue.use(VueResource)

设置开发服务器代理，修改config/index.js，

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
 ...

修改method，url中传递json参考我的博客JavaScript字符编码与解码，

  methods: {
    onSubmit () {
      console.log('submit!' + this.form.name)
      this.$http.get('api/cgi-bin/helloworld.cgi?name=' + this.form.name).then((response) => {
        console.info(response.body)
      }, (response) => {
        console.error(response)
      })
    }
  }

开启服务器运行cgi，点击按钮提交表单，

问题

Expected indentation of 8 spaces but found 10

这个问题是制表符个数不对，多打了了一个（已经让vscode自动将tab转空格），

Missing space before function parentheses

onSubmit() {改成onSubmit () {，添加一个空格，

Extra semicolon

多加了一个分号，

  src\components\HelloWorld.vue:172:29
        console.log('submit!');