2

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

这是我拥有html的代码：DataTable

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

这是data()在my component：

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
  },

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

4

1 回答 1

1

rowsPerPageOptions需要整数值数组才能在每页下拉列表的行内显示 。有关更多信息，请参阅此内容。

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

data() {
    return {
      comunicaciones: null,
      columnas: null,
      numFilas: 10,
      comboFilas: [10,20,30,40,50]
    };
  }
于 2019-09-23T10:41:47.087 回答