Question

我最近一直在使用Buefy数据表，遇到了一个问题。我有分页，排序和可检查的行。

当前，当我降低行数时，除“订单”和“护理级别”外，所有表标题都消失了。（“护理级别”一直沿订单旁边的位置滑动。）

默认行数是25。如果我降低行数，则会发生上述问题。即使我走得更高，例如“ 50”，然后再回到25，就会出现问题。

这是我的代码：

<template lang="pug">
section.dataTable
  b-field.tableHeaders.row(grouped='' group-multiline='')
    .col-sm-8
      div.select-field
        span Show &nbsp;
        b-select(v-model='perPage' style="display:inline-block")
          option(value='5') 5
          option(value='10') 10
          option(value='25') 25
          option(value='50') 50 
          option(value='100') 100
          option(:value='slotRows.length') All
        span
          | &nbsp; entries
    .col-sm-4
      .btn-group.pull-right
        button.btn.btn-default(@click='copy')
          span Copy
        button.btn.btn-default(@click='exportCSV')
          span CSV
        button.btn.btn-default(@click='exportExcel')
          span Excel

  b-table(
    :data='slotRows' 
    :paginated='isPaginated' 
    :per-page='perPage' 
    :current-page.sync='currentPage' 
    :pagination-simple='isPaginationSimple' 
    default-sort='name' 
    :checked-rows.sync='checkedRows' 
    checkable=''
  ) 
    template(slot-scope='props')
      b-table-column(field='order' label='Order' sortable='')
        | {{ props.row.order }}
      b-table-column(field='name' label='Name' sortable='' v-html="props.row.name")
      b-table-column(field='area' label='Area' sortable='' v-html="props.row.area")
      b-table-column(field='careLevel' label='Care Level' sortable='') {{props.row.careLevel | humanizeCareLevel}}
      b-table-column(field='drr' label='DRR' sortable='' v-html="props.row.drr")
      b-table-column(field='arr' label='ARR' sortable='' v-html="props.row.arr")
      b-table-column(field='installationDeviceName' label='Installation Device' sortable='' v-html="props.row.installationDeviceName")
      b-table-column(field='group' label='Group' sortable='' v-html="props.row.group")
      b-table-column(field='checklist' label='Checklist' sortable='' v-html="props.row.checklist")
</template>

脚本：

<script lang="ts">
import {saveAs} from 'file-saver';
import * as Papa from 'papaparse';
import Vue from 'vue';
import * as XLSX from 'xlsx';
import {CareLevels} from '../mixins/HumanizeMixin';
import WebUtil from '../webutil-shim';
import LoadingPanel from './LoadingPanel.vue';
export default Vue.extend({
  mixins: [CareLevels],
  props: {
    webConfig: {
      type: Object,
      required: true,
    },
  },
  data() {
      return {
        headers: ['', 'Order', 'Name', 'Area', 'Level of Care', 'DRR', 'ARR',
        'Installation Device', 'Group', 'Checklist'],
        slotData: [] as any[],
        slotRows: [] as Array<{}>,
        checkedRows: [],
        isPaginated: true,
        isPaginationSimple: false,
        currentPage: 1,
        perPage: 25,
      };
  },
  mounted() {
    this.$_fetchSlots();
  },
  methods:{
    $_fetchSlots(){
      //Fills slotRows with required data -> *WORKS*
    }
  }

如果任何人熟悉Buefy并且知道如何解决此问题，将非常感谢您的建议！谢谢！

Buefy表头消失

0 个答案: