admin-cms-1/src/layout/online/onlineForm.vue

<template>
  <div id="onlineForm">
    <el-row>
      <el-col :span="24" class="onlineForm">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="主题说明">
            <el-input type="textarea" v-model="form.content" placeholder="请输入主题说明"></el-input>
          </el-form-item>
          <el-form-item label="图片地址">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="请选择选项数量" prop="num">
            <el-select v-model="form.num" placeholder="请选择选项数量">
              <el-option label="1" value="man"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleCancel">返回</el-button>
            <el-button type="primary" @click="handleEdit()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'onlineForm',
  props: {
    form: null,
  },
  components: {},
  data: () => ({
    fileList: [],
  }),
  created() {},
  computed: {},
  methods: {
    handleEdit() {
      this.handleCancel();
    },
    handleCancel() {
      this.$router.push({ path: './index' });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  padding: 0 200px;
}
.onlineForm {
  padding: 20px 0;
}
</style>