<template>
  <div>
    <div class="search-wrapper">
      <el-input v-model="inputName" />
      <el-date-picker
        v-model="inputDateTime"
        style="margin-left: 20px;"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button type="success" size="medium" style="margin-left: 20px;">查询</el-button>
    </div>
    <div class="eltable-wrapper">
      <el-table
        :data="tableData"
      >
        <el-table-column
          prop="userName"
          label="用户名"
          width="100"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="90"
        />
        <el-table-column
          prop="couseSum"
          label="课程数"
          width="50"
        />
        <el-table-column
          prop="date"
          label="日期"
          width="120"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          userName: '1',
          name: '1',
          couseSum: 1,
          date: '2020-1-1'
        },
        {
          userName: '2',
          name: '2',
          couseSum: 2,
          date: '2020-2-2'
        },
        {
          userName: '3',
          name: '3',
          couseSum: 3,
          date: '2020-3-3'
        }
      ],
      inputName: '',
      inputDateTime: ''
    }
  }
}
</script>

<style lang="scss">

</style>
