<template>
  <q-table :pagination="msg" selection="single" :selected.sync="selection" no-data-label="暂无相关数据" flat
    class="sticky-tow-column-table sticky-two-header-table" separator="none" :data="dataList" :columns="columns"
    row-key="ClassId" @update:selected="emitSel" table-class="table" hide-bottom>
  </q-table>
</template>

<script>
  export default {
    props: {
      dataList: {
        type: Array,
        default: () => []
      },
      select: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        selection: [],
        msg: {
          pageIndex: 1,
          rowsPerPage: 0
        },
        columns: [{
            name: "ClassName",
            label: "班级",
            align: "left",
            field: "ClassName"
          },
          {
            name: "CourseName",
            label: "课程",
            field: "CourseName",
            align: "left"
          },
          {
            name: "TeacherName",
            label: "老师",
            field: "TeacherName",
            align: "left"
          },
          {
            name: "OpenTime",
            label: "上课时间",
            field: "OpenTime",
            align: "left"
          }
        ]
      };
    },
    mounted() {
      this.selection = this.select
    },
    methods: {
      emitSel(val) {
        this.$emit("select", val)
      },
    }
  };

</script>
<style>
  .table {
    max-height: 400px;
  }

  .table::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .table::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 2px;
  }

  .table::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
  }

  .table::-webkit-scrollbar-thumb:hover {
    background: #999;
  }

  .table::-webkit-scrollbar-corner {
    background: #204754;
  }

</style>
