我希望（暂时）实现我称之为伪造的分页。
我有一个填充了大量数据的表。我用AJAX获得了整个数据集，但表格很大。
我的问题是：如何实现显示我桌子的前10个项目然后如果我点击第2页它将从11到21获取项目等等...
<artifactType type="application/vnd.wso2-soap-service+xml" shortName="soapservice" singularLabel="Servicio SOAP" pluralLabel="Servicios SOAP" hasNamespace="false" iconSet="27">
<storagePath>/trunk/soapservices/@{namespace}/@{overview_version}/@{name}</storagePath>
<nameAttribute>overview_name</nameAttribute>
<namespaceAttribute>overview_namespace</namespaceAttribute>
<lifecycle>ServiceLifeCycle</lifecycle>
<ui>
<list>
<column name="Service Name">
<data type="text" value="overview_name"/>
</column>
<column name="Service Version">
<data type="path" value="overview_version" href="@{storagePath}"/>
</column>
<column name="Service Namespace">
<data type="text" value="overview_namespace"/>
</column>
</list>
</ui>
<content>
<table name="Overview">
<field type="text" required="true" readonly="true">
<name label="Nombre">Name</name>
</field>
<field type="text" required="true" readonly="true">
<name label="Namespace">Namespace</name>
</field>
<field type="text" required="true" readonly="true">
<name label="Versión">Version</name>
</field>
<field type="text-area">
<name label="Descripción">Description</name>
</field>
</table>
<table name="Contacts">
<subheading>
<heading>Contact Type</heading>
<heading>Contact Name/Organization Name</heading>
</subheading>
<field type="option-text" maxoccurs="unbounded">
<name label="Contactos">Contact</name>
<values>
<value>None</value>
<value>Technical Owner</value>
<value>Business Owner</value>
</values>
</field>
</table>
<table name="Interface">
<field type="text">
<name label="WSDL">WSDL URL</name>
</field>
<field type="text">
<name label="WSDL URL">WSDLHttp</name>
</field>
<field type="options">
<name label="Protocolos de Transporte">Transport Protocols</name>
<values>
<value>None</value>
<value>HTTPS</value>
<value>HTTP</value>
<value>SMTP</value>
<value>TCP</value>
<value>XMPP</value>
<value>JMS</value>
</values>
</field>
<field type="options">
<name label="Formatos del Mensaje">Message Formats</name>
<values>
<value>None</value>
<value>SOAP 1.1</value>
<value>SOAP 1.2</value>
<value>XML</value>
<value>JSON</value>
<value>HTTP-REST</value>
<value>CSV</value>
<value>BINARY</value>
</values>
</field>
<field type="options">
<name label="Patrones de Intercambio de Mensajes">Message Exchange Patterns</name>
<values>
<value>None</value>
<value>Request Response</value>
<value>One Way</value>
</values>
</field>
</table>
<table name="Security">
<field type="options">
<name label="Plataforma de Autenticación">Authentication Platform</name>
<values>
<value>None</value>
<value>TAM_WEBSEAL</value>
<value>XTS-WS TRUST</value>
<value>BuiltIn</value>
<value>WSO2 Identity Server</value>
</values>
</field>
<field type="options">
<name label="Mecanismo de Autenticación">Authentication Mechanism</name>
<values>
<value>None</value>
<value>OpenID</value>
<value>InfoCard</value>
<value>Client Certifcates</value>
<value>HTTPS Basic Authentication</value>
<value>IP Address Filtering</value>
<value>WS-Security/WS-Trust Token</value>
<value>Others</value>
</values>
</field>
<field type="options">
<name label="Plataforma de Autorización">Authorization Platform</name>
<values>
<value>None</value>
<value>TAM_WEBSEAL</value>
<value>XTS-WS TRUST</value>
<value>BuiltIn</value>
<value>WSO2 Identity Server</value>
</values>
</field>
<field type="options">
<name label="Integridad del Mensaje">Message Integrity</name>
<values>
<value>None</value>
<value>SSL</value>
<value>WS-Security</value>
<value>XML Digital Signatures</value>
<value>Other</value>
</values>
</field>
<field type="options">
<name label="Encriptación del Mensaje">Message Encryption</name>
<values>
<value>None</value>
<value>SSL</value>
<value>WS-Security</value>
<value>XML Digital Signatures</value>
<value>Other</value>
</values>
</field>
<field type="text-area">
<name label="Comentarios">Comments</name>
</field>
</table>
<table name="Operaciones" columns="3" maxoccurs="unbounded">
<subheading>
<heading>Nombre</heading>
<heading>Descripcion</heading>
<heading>Prueba</heading>
</subheading>
<field type="text">
<name label="Nombre">nombre</name>
</field>
<field type="text">
<name label="Descripcion">descripcion</name>
</field>
<field type="text" url="true">
<name label="url">url</name>
</field>
</table>
<table name="Insumos" columns="4" maxoccurs="unbounded">
<subheading>
<heading>Nombre</heading>
<heading>XML Entrada</heading>
<heading>XML Salida</heading>
<heading>XML Ejemplo</heading>
</subheading>
<field type="text">
<name label="Nombre">nombre</name>
</field>
<field type="text">
<name label="Entrada">entrada</name>
</field>
<field type="text">
<name label="Salida">salida</name>
</field>
<field type="text">
<name label="Salida">url</name>
</field>
<field type="text">
<name label="Salida2">url</name>
</field>
</table>
<table name="Endpoints">
<subheading>
<heading>Environments</heading>
<heading>URL</heading>
</subheading>
<field type="option-text" maxoccurs="unbounded" url="true">
<name label="Endpoint">Endpoint</name>
<values>
<value>None</value>
<value>Unknown</value>
<value>Dev</value>
<value>Test</value>
<value>Stag</value>
<value>Prod</value>
</values>
</field>
</table>
<table name="Doc Links" columns="3">
<subheading>
<heading>Document Type</heading>
<heading>URL</heading>
<heading>Comment</heading>
</subheading>
<field type="text">
<name label="Document Type">Document Type</name>
</field>
<field type="text" url="true">
<name label="URL">URL</name>
</field>
<field type="text-area">
<name label="Document Comment">Document Comment</name>
</field>
</table>
</content>
</artifactType>
https://jsfiddle.net/r89fy3vn/
谢谢
答案 0 :(得分：1)
我可能会创建一个名为page的数字属性来传递给组件（第一页= 0等），然后将组件模板更改为
<tr v-for="entry in filteredData.slice(page*10, 10)">
肯定会对错误检查页面变量的界限等做一些改进，但这应该是一个好的开始。