Vuetable 属性

api-mode

  • 类型:Boolean

  • 默认:true

  • 使用:

    默认情况下,Vuetable将从中指定的API端点请求数据 api-url.

    但是,可以通过设置api-modefalse(也称为“ “Data mode” ”)来指示Vuetable使用现有数据。然后,Vuetable将在data 道具中查找数据。

    您提供给data的数据必须具有Vuetable可以使用的JSON结构。有关更多详细信息,请参见[JSON数据结构]。

    请注意,禁用api-mode(通过将其设置为false)也将disable所有与API相关的功能,例如排序,过滤等。但是您可以使用data-manager定义数据管理器功能,该功能可以在Vuetable使用它之前对数据执行这些功能。

    注意

    不建议设置api-modefalse。当您必须自己处理一个大型数据集而不是让后端的数据库管理器为您处理时,它将无法很好地扩展。

  • 请参阅:

api-url

  • 仅在API模式下工作

  • 类型:String

  • 默认:''(空字符串)

  • 使用:

    Vuetable将与之交互的api端点的URL。

    如果API支持数据的排序,过滤,分页,则Vuetable可以通过查询字符串自动将适当的信息附加到服务器。

    注意

    Vuetable不对数据进行排序或不知道如何对数据进行排序。它只是从服务器端(API端点)返回的数据的表示层。

    在API模式下,您的API端点必须能够接受排序选项;否则,排序将无法进行。当用户与之交互时,Vuetable可以使用sort选项发送适当的请求。有关更多详细信息,请参见[排序]。

    在数据模式下,您作为开发人员负责使用您选择的任何机制对数据进行排序,然后将排序后的数据提供给Vuetable进行显示。

  • 请参阅:

append-params

  • 仅在API模式下工作

  • 类型:Object

  • 默认:{}(空对象)

  • 使用:

    从服务器请求数据时,Vuetable应该附加到查询字符串的其他参数。

  • 请参阅:

    • [TODO]: 将其他参数附加到查询字符串

css

  • 类型:Object

  • 默认:{} (空对象)

  • 使用:

    在这里,您应该覆盖Vuetable用来呈现HTML表格的CSS类,以帮助您根据需要设计表格样式。

  • 请参阅:

data

  • 仅在数据模式下工作

  • 类型:Array | Object

  • 默认:null

  • 使用:

    这Vuetable将被用来当渲染表中的数据api-mode 被设置为 false.

    警告

    如果 data您提供的是具有Data Format描述的数据结构的对象,则可以利用Vuetable的分页功能。

data-manager

  • 仅在数据模式下工作

  • 类型:Function

  • 默认:null

  • 使用:

    请参阅 here.

data-path

  • 仅在API模式下工作

  • 类型:String

  • 默认:data

  • 使用:

    数据结构内部包含实际数据的路径。

    提示

    如果数据位于结构的根目录,请将此属性设置为空字符串,例如data-path="".

detail-row-component

  • 类型:String

  • 默认:''(空字符串)

  • 使用:

    用作要显示在当前行下方的明细行内容的组件名称。

detail-row-transition

  • 类型:String

  • 默认:''(空字符串)

  • 使用:

    在过渡期间应用于明细行的CSS类。

detail-row-class

  • 类型:String

  • 默认:vuetable-detail-row

  • 使用:

    适用于明细行的CSS类。

detail-row-options

  • 类型:Object

  • 默认:{}(空对象)

  • 使用:

    要传递给明细行组件的对象options

event-prefix

fields

  • 类型:Array

  • 默认:none

  • 需要: true

  • 使用:

    Vuetable将用于映射到数据结构以便呈现表以供呈现的字段定义数组。

  • 请参阅:

field-prefix

  • 类型:String

  • 默认:“vuetable-field-“

  • 使用:

    Vuetable中使用的Feild组件的默认组件名称前缀。

    __ 字段定义的字段名称中的字符用作要用于给定列的字段组件的简写。在初始化Vuetable时,速记将替换为给定的前缀。

  • 请参阅:

first-page

  • 仅在API模式下工作

  • 类型:Number

  • 默认:1

  • 使用:

    第一页编号。将此道具设置为0,以从零开始的分页。

    如果您的API端点的首页是0,则可以使用此道具进行设置。

header-rows

  • 类型:Array

  • 默认:[‘VuetableRowHeader’]

  • 使用:

    将作为表头呈现的行头组件的数组。

  • 请参阅:

http-fetch

  • 仅在API模式下工作

  • 类型:Function

  • 默认:null

  • 使用:

    允许指定外部HTTP请求功能以通过AJAX提取数据。

    如果为null,则Vuetable将退回到axios内部使用。

    如果指定,Vuetable将调用给定的函数,apiUrl并且已经构造httpOptions到该函数。

    警告

    Vuetable期望给定功能进行AJAX调用apiUrlhttpOptions和返回一个承诺。解决了Promise之后,Vuetable将处理AJAX调用的成功或失败。

    如果您感到困惑,请参见loadData 和源代码中的 fetch方法 Vuetable.vue

    这是一个使用示例vue-resource

    				//...
    				myFetch(apiUrl, httpOptions){
    				return Vue.$http.get(apiUrl, httpOptions)
    				},
    				//...
    				
    			

http-method

  • 仅在API模式下工作

  • 类型:String

  • 默认:get

  • 使用:

    仅支持getpost方法。请注意,它必须是小写的字符串。

http-options

  • 仅在API模式下工作

  • 类型:Object

  • 默认:{}(空对象)

  • 使用:

    允许在AJAX调用期间将其他选项传递给服务器。在内部,Vuetable用于 处理AJAX请求。 axios

initial-page

  • 仅在API模式下工作

  • 类型:Number

  • 默认:1

  • 使用:

    首次加载Vuetable时要请求的数据的初始页码。

load-on-start

  • 仅在API模式下工作

  • 类型:Boolean

  • 默认:true

  • 需要: true

  • 使用:

    完成初始化后,Vuetable是否应立即从服务器加载数据。

min-rows

  • 类型:Number

  • 默认:0

  • 使用:

    呈现表时应显示的最小行数。

    如果可用行数小于min-rows中指定的行数,则Vuetable将呈现空表行以满足最小行数。

multi-sort

  • 仅在API模式下工作

  • 类型:Boolean

  • 默认:false

  • 使用:

    启用多个排序列交互。

    启用此功能后,用户可以按修饰键(在multi-sort-key中指定)对排序结果进行后续排序。

    注意

    在多排序模式下,后续排序列中的排序图标将显示为较暗,以指示排序级别。

multi-sort-key

  • 仅在API模式下工作

  • 类型:String

  • 默认:alt

  • possible values: alt, ctrl, shift, meta

  • 使用:

    启用多重排序时触发列添加/减少的键。

per-page

  • 仅在API模式下工作

  • 类型:Number

  • 默认:10

  • 使用:

    每页要请求的数据数。

query-params

  • 仅在API模式下工作

  • 类型: [Object, _Function`]

  • 默认:

    	{
      sort: 'sort',
      page: 'page',
      perPage: 'per_page'
    }
    				
    			
  • 使用:

    用作查询字符串中关键字的文本,该文本将发送到服务器。如果您的API端点使用不同的键,则可以通过此prop指定它们。

    当您将query-params设置为, you can completely override the behevior of关于如何构造查询字符串的_Function query-prams` prop时。

    Vuetable会将以下参数传递给给定的函数:

    • sortOrder — 当前排序顺序
    • currentPage — 当前显示页面
    • perPage — 当前页面大小

    该函数必须返回一个包含键-值对的对象,该对象将被构造为查询字符串;否则,将返回空对象{}

  • 请参阅:

reactive-api-url

  • 仅在API模式下工作

  • 类型:Boolean

  • 默认:true

  • 使用:

    这告诉Vuetable是否应该监视api-url 的更改并自动刷新数据。

row-class

  • 类型:String, Function

  • 默认:''(空字符串)

  • 使用:

    将应用于每个表格行的CSS类名称。

    如果 row-class是_Function`,则Vuetable将自动在每一行上调用给定函数,并将行数据和行索引传递给它。然后,Vuetable将使用从给定方法返回的字符串作为该行的CSS类。

    这是使用方法返回行类以进行样式设置的示例。

    <template>
    <vuetable>
        :row-class="onRowClass"
      >
    </vuetable>
    </template>
    <script>
    				//..
      methods
    				:{
    				onRowClass(dataItem, index){
    				return(dataItem.isOverdue)?'color-red':'color-white'
    				}
    				}
    </script>
    				
    			

show-sort-icons

  • 类型:Boolean

  • 默认:true

  • 使用:

    这告诉Vuetable th每当给定的列可排序时,是否应将图标添加到元素。

sort-order

  • 仅在API模式下工作

  • 类型:Array

  • 默认:[](empty array)

  • 使用:

    从服务器请求数据时,Vuetable应该使用的默认排序顺序。

sort-params

  • 仅在API模式下工作

  • 类型:Function that returns String

  • 默认:null

  • 使用:

    如果已分配,则Vuetable将调用此函数,并将当前排序顺序数组作为参数传递。您可以使用它来覆盖如何将排序参数构造为将发送到API端点的查询字符串的一部分。

    该函数必须返回要包含在API请求的查询字符串中的字符串。

no-data-template

  • 类型:String

  • 默认:''(空字符串)

  • 使用:

    表中没有记录时要显示的文本。它还支持HTML。

    文本将插入到td 整个行中的。

pagination-path

  • 仅在API模式下工作

  • 类型:String

  • 默认:links.pagination

  • 使用:

    包含分页信息的数据结构内部的分页路径。

    如果来自服务器的数据没有分页元数据,则应将prop设置为空字符串,例如 pagination-path="",以禁止来自Vuetable的警告。

table-height

  • 类型:String

  • 默认:null

  • 使用:

    固定桌子主体的高度。

    设置后,Vuetable主体的高度将设置为给定值,并且当表主体的内容长于给定值时,垂直滚动条将自动出现。

    该值可以是HTML中有效的任何单位。

    警告

    指定表格的高度时,还必须在字段定义中设置每一列的宽度,否则,标题和正文中每一列的宽度将看起来不一样。

    因为Vuetable将表头和表主体呈现为单独的表。

track-by

  • 类型:String

  • 默认:id

  • 使用:

    该键用于无意义地标识数据数组中的每一行,以帮助跟踪Vuetable的明细行和复选框功能的状态。为了使明细行和复选框功能正常运行,这是必需的。

    对于明细行,每当用户单击以展开明细行时,Vuetable都会id将该行的插入其内部数组(visibleDetailRows)。当该详细信息行被隐藏时,该id详细信息行的将从数组中删除。

    对于复选框,当用户选择(选中)行时,Vuetable会将id行的插入到其内部数组(selectedTo)中。当未选中(未选中)id该行时,该行的从数组中删除。

  • 请参阅:

transform

  • 仅在API模式下工作

  • 类型:Function

  • 默认:null

  • 使用:

    允许用户以编程方式将接收的数据转换为Vuetable可以使用的一个功能。

    定义后,只要Vuetable在显示数据之前从服务器接收到请求的数据,就会调用给定函数。这提供了一个挂钩来操纵开发人员可能对其格式具有控制权的数据,从而将数据转换为可以使用Vuetable的格式。

    该函数将接收从服务器返回的原始数据作为其参数。它必须返回已经转换的数据;否则,该表可能显示为空。

  • 请参阅: