Quasar QTable中的粘性标题

Posted 2023-02-22

【中文标题】Quasar QTable中的粘性标题

【英文标题】：Sticky Header in Quasar QTable

【发布时间】：2020-05-30 11:15:31

【问题描述】：

我试图让我的 QTable 上的标题保持粘性。我已经在我的项目中使用了 Quasar 文档中的代码，只有表格顶部的模板是粘性的，而表格的标题不是。经过大量的玩耍和尝试不同的代码后，我仍然无法完成我想做的事情。任何帮助，将不胜感激。 组件代码如下：

<template>
  <div>
    <q-toolbar class="bg-grey-1 text-subtitle1 text-blue-grey-8 shadow-2 rounded-borders">
      <q-breadcrumbs class="text-grey" active-color="primary">
        <template v-slot:separator>
          <q-icon size="24px" name="arrow_forward" color="primary" />
        </template>

        <q-breadcrumbs-el
          label="Settings"
          icon="settings"
          class="hover cursor-pointer"
          @click="$router.push('/system')"
        />
        <q-breadcrumbs-el label="Course" class="text-primary" icon="class" />
      </q-breadcrumbs>
    </q-toolbar>
    <q-table
      class="q-mt-sm my-sticky-virtscroll-table"
      :columns="columns"
      :data.sync="getData"
      :pagination.sync="serverPagination"
      row-key="id"
      selection="single"
      :selected.sync="selected"
      @request="request"
    >
      <template slot="top">
        <q-btn dense color="primary" icon="arrow_drop_down" class="q-mr-sm"></q-btn>
        <q-input
          v-model="filter"
          placeholder="Search by Academic Program"
          type="text"
          class="col-3"
          @keypress.enter.native="search"
        />
        <q-btn
          class="q-pl-sm q-pr-sm"
          color="primary"
          flat
          @click="$refs.addCourse.toggle()"
        >
          <q-icon name="fas fa-plus" />
          <q-tooltip
            anchor="top middle"
            self="bottom middle"
            :offset="[10, 10]"
          >
            <strong>Add new Course</strong>
          </q-tooltip>
        </q-btn>
        <q-btn
          class="q-pl-sm"
          color="primary"
          :disable="!selected.length"
          flat
          @click="$refs.editCourse.toggle(selected[0])"
        >
          <q-icon name="fas fa-pencil-alt" />
          <q-tooltip
            anchor="top middle"
            self="bottom middle"
            :offset="[10, 10]"
          >
            <strong>Edit Course</strong>
            <br />Select record first
          </q-tooltip>
        </q-btn>
        <div class="col" />
        <q-btn
          color="negative"
          :disable="!selected.length"
          flat
          round
          @click="$refs.deleteCourse.toggle()"
        >
          <q-icon name="fas fa-trash-alt" />
          <q-tooltip
            anchor="top middle"
            self="bottom middle"
            :offset="[10, 10]"
          >
            <strong>Delete Course</strong>
            <br />Select record first
          </q-tooltip>
        </q-btn>
      </template>
    </q-table>
    <addCourse ref="addCourse"></addCourse>
    <editCourse :data="this.selected" ref="editCourse"></editCourse>
    <deleteCourse ref="deleteCourse"></deleteCourse>
  </div>
</template>

<script lang="ts">
import  Vue, Component  from 'vue-property-decorator'
import AddCourse from './AddCourse.vue'
import EditCourse from './EditCourse.vue'
import DeleteCourse from './DeleteCourse.vue'
import  Course, CourseModule, DataTablePagination  from '../../../store/course/index'

@Component(
  components: 
    addCourse: AddCourse,
    editCourse: EditCourse,
    deleteCourse: DeleteCourse
  
)
export default class ManageCourse extends Vue 
  private filter: string = ''
  private selected: Course [] = []
  private columns = [
    
      name: 'name',
      label: 'Name',
      align: 'center',
      required: true,
      field: 'name',
      sortable: true
    ,
    
      name: 'code',
      label: 'Code',
      align: 'center',
      required: true,
      field: 'code',
      sortable: true
    ,
    
      name: 'creditHours',
      label: 'Credit Hours',
      align: 'center',
      required: true,
      field: 'creditHours'
    ,
    
      name: 'numberOfLabs',
      label: 'Number of Labs',
      align: 'center',
      required: true,
      field: 'numberOfLabs'
    ,
    
      name: 'contactHours',
      label: 'Contact Hours',
      align: 'center',
      required: true,
      field: 'contactHours'
    
  ]

  get getData() 
    return CourseModule.courses
  

  get serverPagination() 
    return CourseModule.pagination
  

  set serverPagination(value: DataTablePagination) 
    CourseModule.SET_PAGINATION(value)
  

  request(args: any) 
    CourseModule.SET_PAGINATION(args.pagination)
    CourseModule.fetchCourses()
  

  search() 
    CourseModule.SET_FILTER(this.filter)
    CourseModule.fetchCourses()
  

  beforeMount() 
    CourseModule.fetchCourses()
  

</script>

<style scoped lang="sass">
.my-sticky-virtscroll-table
  /* height or max-height is important */
  height: calc(100vh - 150px)

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th /* bg color is important for th; just specify one */
    background-color: #fff

  thead tr th
    position: sticky
    z-index: 1
  /* this will be the loading indicator */
  thead tr:last-child th
    /* height of all previous header rows */
    top: 48px
  thead tr:first-child th
    top: 0
</style>

【参考方案1】：

这是Vue scoped-css 的事情。

默认情况下，作用域样式不会影响子组件，除非您添加特殊的 deep 组合子，即>>>。对于预处理器，例如 sass，使用 /deep/ 组合器别名或 ::v-deep 伪元素。

所以，你应该这样做：

<style scoped lang="sass">
.my-sticky-virtscroll-table::v-deep
  /* height or max-height is important */
  height: calc(100vh - 150px)

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th /* bg color is important for th; just specify one */
    background-color: #fff

  /* ... */
</style>

编辑： 使用 ::v-deep 代替已弃用的 /deep/。见https://***.com/a/55368933/645296

【参考方案2】：

<style lang="sass">
.sticky-header
  /* height or max-height is important */
  max-height: 100vh

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th
    /* bg color is important for th; just specify one */
    background-color: #fff

  thead tr th
    position: sticky
    z-index: 1
  thead tr:first-child th
    top: 0

  /* this is when the loading indicator appears */
  &.q-table--loading thead tr:last-child th
    /* height of all previous header rows */
    top: 48px
</style>
<q-table class="sticky-header"></q-table>

https://quasar.dev/vue-components/table#Sticky-header%2Fcolumn

我认为这对你有用。