1、典型表单

<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-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

elementui checkbox-group多选框怎么选中id值

<el-checkbox-group v-model="checked" @change="test">
    <el-checkbox v-for="item in checkList"
         :key="item.id"
         :label="item.id"
        >{{item.label}}                
    </el-checkbox>
</el-checkbox-group>
 

　　注意下绑定值 同时  el-radio-group  一样操作

2、表单验证

:model="ruleForm" 必须是对象

在data()中写入rule{},将prop中需要校验的字段写上验证规则

具体看官网示例

3、自定义校验规则

// 表单校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          // 自定义校验规则
          { validator: validName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          // 自定义校验规则
          { validator: validCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
        ]
      }

在data中定义表单校验规则，一个表单项可定义多条规则，表单项规则用数组，规则为对象，required为必须填写，message为校验提示信息，trigger为校验时机，可选blur和change，分别为失去焦点和数据变化；min/max为最小与最大字符个数，validator为自定义校验规则，参数可以直接写规则，也可以写函数。 

配置模板，应用规则
      给表单设置 rules 属性传入验证规则
      给表单设置model属性传入表单数据
      给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

<el-form ref="deptForm" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
</el-form>

   this.$refs.deptForm.validate(valid => {
        if (valid) { // true为校验通过
          
        }
      })

 

给form表单添加校验前提是要处理以下三步

1. 在el-form元素上绑定一个model属性和绑定一个rules规则属性
2. 在el-form-item,表单项添加一个prop属性
3. 在el-input输入框添加v-model进行双向绑定

动态增减表单项

<el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>

data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },

注意重点1
form表单里的 :model="form" :rules="rules"model和rules不能省略，而且这个model必须是个对象，虽然在当前例子里，我们的数据form其实就是一个数组，但是还要包裹一层成对象。
每一项绑定prop时，一定要按照:prop=" 'list.' + index + '.maintUnit'"这种格式，list是需要循环的数组key名，一定不要写成form.list，也不是循环出的每一项item，index是每项的下标，maintUnit是当前字段key值。
每一项必须单独绑定验证规则，如例子中的:rules="rules.maintUnit"
prop和当前字段的key值要保持一致，无论是动态表单还是静态表单都要保持一致
 

 form: {
   list: [{maintUnit:'v' id: Date.now() }] // 这里添加了一个当前时间戳作为循环使用的key，如果使用index作为key，虽然避免的报错，但是对性能没有什么帮助，而且可能增加新能问题。
 },

注意重点2  -多层循环 或多个for

官方示例

data() {
    return {
      dynamicValidateForm: {
        relation: {
          pos: {
            // 数组1
            domains: [{
              value: '',
                // 数组2
              list: [{   
                name: ''
              }]
            }]
          }
        },

        email: ''
      }
    };
  },

 prop内容必须是从根部开始的形式为：“数组+索引+...+最终校验值的命名(最后)”

多层循环：：数组+索引+数组+索引+数组+索引+最终校验值的命名