入门

警告

Vuetable-2 v2.0目前仍处于测试阶段。

安装

依赖关系

NPM

npm install vuetable-2@next --save

CDN

https://unpkg.com/vuetable-2@next

用法

导入并将Vuetable用作组件。

<template>
  <vuetable ref="vuetable"
    api-url="https://vuetable.ratiw.net/api/users"
    :fields="['name', 'nickname', 'email', 'gender']"
    data-path=""
    pagination-path=""
  ></vuetable>
</template>

<script>
import Vuetable from 'vuetable-2'

export default {
  components: {
    Vuetable
  }
}
</script>

您至少需要使用以下道具来初始配置Vuetable

  • api-url — JSON数据的来源
  • fields — 要显示的数据的字段定义
  • data-path — JSON中的数据路径
  • pagination-path — JSON中的分页元数据的路径

有关更多详细信息,请参见“字段定义 部分。

Vuetable通常可以处理来自API端点和字段定义的数据。如果你喜欢来处理数据检索自己,你可以切换到使用Vuetable在数据模式下,转动API模式与关闭:api-mode="false",并通过提供数据data的道具或setData 功能。

















<template>
  <vuetable ref="vuetable"
    :fields="['name', 'nickname', 'email', 'gender']"
    :api-mode="false"
    :data="localData"
  ></vuetable>
</template>

<script>
import Vuetable from 'vuetable-2'

export default {
  components: {
    Vuetable
  }
}
</script>

有关更多详细信息,请参见API与数据模式部分。