1

src/components/school/student/transfer-order/courselist.vue

 <template>
-  <div class="orderCourse">
-    <q-table
-      :pagination="msg"
-      selection="single"
-      :selected.sync="selection"
-      no-data-label="暂无相关数据"
-      flat
-      class="sticky-tow-column-table "
-      separator="none"
-      :data="dataList"
-      :columns="columns"
-      row-key="ClassId"
-      title="日语培训产品列表"
-      @update:selected ="emitSel"
-    >
-      <!-- <template v-slot:body-cell-ClassName="props">
-          <q-td :props="props">
-            {{ props.row.ClassName }} 
-          </q-td>
-        </template> -->
-      <template v-slot:bottom> </template>
-    </q-table>
-  </div>
+  <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
+  export default {
+    props: {
+      dataList: {
+        type: Array,
+        default: () => []
       },
-      columns: [
-        {
-          name: "ClassName",
-          label: "班级",
-          align: "left",
-          field: "ClassName"
-        },
-        {
-          name: "CourseName",
-          label: "课程",
-          field: "CourseName",
-          align: "left"
-        },
-        {
-          name: "TeacherName",
-          label: "老师",
-          field: "TeacherName",
-          align: "left"
+      select: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data() {
+      return {
+        selection: [],
+        msg: {
+          pageIndex: 1,
+          rowsPerPage: 0
         },
-        {
-          name: "OpenTime",
-          label: "上课时间",
-          field: "OpenTime",
-          align: "left"
-        }
-      ]
-    };
-  },
-  mounted() {
-    this.selection=this.select
-  },
-  methods: {
-      emitSel(val){
-           this.$emit("select",val)
+        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 >
-.orderCourse .q-table__bottom {
-  min-height: 0;
-}
+<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>