vue+element-ui创建表单（公益内容）

<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="公益名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="公益所在地点">
        <el-input v-model="form.location"></el-input>
      </el-form-item>
      <el-form-item label="公益开始时间">
        <el-date-picker v-model="form.startTime" type="date"></el-date-picker>
      </el-form-item>
      <el-form-item label="受益群体">
        <el-checkbox-group v-model="form.beneficiaries">
          <el-checkbox label="流浪动物"></el-checkbox>
          <el-checkbox label="野生动物/生物"></el-checkbox>
          <el-checkbox label="困难人民"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="资金预估">
        <el-input-number v-model="form.funding"></el-input-number>
      </el-form-item>
      <el-form-item label="计划书">
        <el-input type="textarea" v-model="form.plan"></el-input>
      </el-form-item>
      <el-form-item label="公益共识">
        <el-radio-group v-model="form.consensus">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传凭证">
        <el-upload
          action="/upload"
          :on-success="handleUploadSuccess"
          :on-remove="handleUploadRemove"
          :file-list="form.files"
          multiple
        >
          <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">立即创建</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        location: '',
        startTime: '',
        beneficiaries: [],
        funding: 0,
        plan: '',
        consensus: '',
        files: []
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单逻辑
          console.log(this.form);
        } else {
          console.log('表单校验失败');
          return false;
        }
      });
    },
    handleReset() {
      this.$refs.form.resetFields();
    },
    handleUploadSuccess(response, file, fileList) {
      // 上传成功回调
      console.log(response);
      this.form.files = fileList;
    },
    handleUploadRemove(file, fileList) {
      // 删除文件回调
      console.log(file, fileList);
      this.form.files = fileList;
    }
  }
};
</script>

代码效果：

<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="公益名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="公益所在地点">
        <el-input v-model="form.location"></el-input>
      </el-form-item>
      <el-form-item label="公益时间范围">
        <el-date-picker
          v-model="form.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="受益群体">
        <el-checkbox-group v-model="form.beneficiaries">
          <el-checkbox label="流浪动物"></el-checkbox>
          <el-checkbox label="野生动物/生物"></el-checkbox>
          <el-checkbox label="困难人民"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="资金预估">
        <el-input-number v-model="form.funding"></el-input-number>
      </el-form-item>
      <el-form-item label="计划书">
        <el-input type="textarea" v-model="form.plan"></el-input>
      </el-form-item>
      <el-form-item label="公益共识">
        <el-radio-group v-model="form.consensus">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传凭证">
        <el-upload
          action="/upload"
          :on-success="handleUploadSuccess"
          :on-remove="handleUploadRemove"
          :file-list="form.files"
          multiple
        >
          <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">立即创建</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        location: '',
        timeRange: [],
        beneficiaries: [],
        funding: 0,
        plan: '',
        consensus: '',
        files: []
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单逻辑
          console.log(this.form);
        } else {
          console.log('表单校验失败');
          return false;
        }
      });
    },
    handleReset() {
      this.$refs.form.resetFields();
    },
    handleUploadSuccess(response, file, fileList) {
      // 上传成功回调
      console.log(response);
      this.form.files = fileList;
    },
    handleUploadRemove(file, fileList) {
      // 删除文件回调
      console.log(file, fileList);
      this.form.files = fileList;
    }
  }
};
</script>

代码效果：