SOURCE

var Main = {
  data() {
      return {
        ruleForm: {
          region: ''
        },
        rules: {
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ]
        },
        options: [{
          value: '{"value":"选项1","label":"黄金糕"}',
          label: '黄金糕'
        }, {
          value: '{"value":"选项2","label":"双皮奶"}',
          label: '双皮奶'
        }, {
          value: '{"value":"选项3","label":"蚵仔煎"}',
          label: '蚵仔煎'
        }, {
          value: '{"value":"选项4","label":"选项4"}',
          label: '龙须面'
        }, {
          value: '{"value":"选项5","label":"北京烤鸭"}',
          label: '北京烤鸭'
        }]
      };
    },
    methods: {
      getSelected(item) {
        console.log(item, 'selected')
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.12/lib/index.js"></script>
<div id="app">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域" @change="getSelected">
      <el-option v-for="item in options" :label="item.label" :value="item.value">
    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</div>

@import url("//unpkg.com/element-ui@1.4.12/lib/theme-default/index.css");