javascript - DataTable 中的 rowsPerPageOptions 未显示

Question

我试图在 PrimeVUE 的 DataTable 组件中显示每页行数下拉选择器。

这是我拥有的DataTable的html代码:

<DataTable :value="comunicaciones" :paginator="true" :rows="numFilas" :rowsPerPageOptions="comboFilas">

这是我的组件中的data():

data() {
    return {
      comunicaciones: null,
      columnas: null,
      numFilas: 10,
      comboFilas: [
        { label: "10", value: 10 },
        { label: "30", value: 30 },
        { label: "50", value: 50 }
      ]
    };
  }

然后在页面中生成以下HTML代码:

<dropdown value="10" options="[object Object],[object Object],[object Object]" optionlabel="label" optionvalue="value"></dropdown>

该表工作正常，因为所有行都正确加载，下拉列表是它唯一的问题。谁能告诉我应该如何传递参数以显示每页行数下拉列表？谢谢!

编辑:似乎像我一样设置 comboFilas 数组，或将其设置为整数数组都是配置它的正确方法。加载页面的时候看控制台，出现这个错误:

[Vue warn]: Unknown custom element: <Dropdown> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <RowsPerPageDropdown> at node_modules/primevue/components/paginator/RowsPerPageDropdown.vue
       <DTPaginator> at node_modules/primevue/components/paginator/Paginator.vue
         <DataTable> at node_modules/primevue/components/datatable/DataTable.vue
           <UltimasComunicaciones> at src/components/UltimasComunicaciones.vue
             <App> at src/App.vue
               <Root>

看起来它没有正确加载下拉组件。我的组件相关代码如下:

<script>
import axios from "axios";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Button from "primevue/button";
import Dropdown from "primevue/dropdown";

export default {
  name: "UltimasComunicaciones",
  components: {
    DataTable,
    Column,
    Button,
    Dropdown
  },

导入和路径似乎是正确的，所以如果有人遇到这个问题，我将不胜感激!

Answer 1

rowsPerPageOptions 要求整数值数组显示在每页行下拉列表中。引用 this了解更多信息。

我在这里更新了你的代码:

data() {
    return {
      comunicaciones: null,
      columnas: null,
      numFilas: 10,
      comboFilas: [10,20,30,40,50]
    };
  }