train-student/src/layout/user/leaveRequest.vue

<template>
  <div id="leaveRequest">
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :model="form">
          <el-form-item>
            <span slot="label">
              <i class="el-icon-date date"></i>
              开始时间
            </span>
            <el-date-picker v-model="form.starttime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label">
              <i class="el-icon-date endDate"></i>
              结束时间
            </span>
            <el-date-picker v-model="form.endtime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label">请假事由</span>
            <el-input type="textarea" v-model="form.reason" :rows="4" placeholder="请输入请假理由"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="cancelClick()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'leaveRequest',
  props: {
    form: null,
  },
  components: {},
  data: () => ({
    date: require('@/assets/date.png'),
  }),
  created() {},
  computed: {},
  methods: {
    onSubmit() {
      this.$emit('submit', { data: this.form });
    },
    cancelClick() {
      this.$emit('cancelClick');
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form-item__label {
  width: 100%;
  text-align: left;
  float: none;
}
/deep/.el-form-item {
  margin: 15px 0;
  text-align: center;
}
.date {
  color: blue;
}
.endDate {
  color: red;
}
/deep/.el-textarea {
  width: 90%;
}
/deep/.el-textarea__inner {
  background: #f5f5f5;
  border: none;
}
</style>