插件名称 | vue-table-component |
---|---|
发布时间 | 2020年12月31日 |
插件作者 | spatie |
此仓库包含一个Vue组件,可以呈现可过滤和可排序的表。它的目标是非常轻巧且易于使用。
# Yarn
$ yarn add vue-table-component
# NPM
$ npm install vue-table-component
这是有关如何使用组件的简单示例。
<table-component
:data="[
{ firstName: 'John', birthday: '04/10/1940', songs: 72 },
{ firstName: 'Paul', birthday: '18/06/1942', songs: 70 },
{ firstName: 'George', birthday: '25/02/1943', songs: 22 },
{ firstName: 'Ringo', birthday: '07/07/1940', songs: 2 },
]"
sort-by="songs"
sort-order="asc"
>
<table-column show="firstName" label="First name"></table-column>
<table-column show="songs" label="Songs" data-type="numeric"></table-column>
<table-column show="birthday" label="Birthday" :filterable="false" data-type="date:DD/MM/YYYY"></table-column>
</table-component>
这将呈现一个既可过滤又可排序的表。表格上方会显示一个过滤器字段。如果您的数据包含任何html,我们将在过滤时将其过滤掉。您可以通过单击列标题对表进行排序。默认情况下,它将在接下来的15分钟内记住使用的过滤器和排序。
您可以将这些道具传递给table-component
:
data
:(必需)组件将在其上操作的数据。这可以是数组或函数show-filter
:将其设置false
为不显示该filter
字段。show-caption
:将其设置false
为不显示caption
显示当前活动过滤器的字段。sort-by
:最初在其上排序的数据中的属性。sort-order
:初始排序顺序。cache-lifetime
:组件将缓存过滤器和排序的生存时间(以分钟为单位)。cache-key
:如果您table-component
在同一页面上使用的多个实例,则必须将其设置为每个实例的唯一值。table-class
:传递的值将添加到class
呈现表的属性中thead-class
:传递的值将添加到class
呈现的表头的属性中。tbody-class
:传递的值将添加到class
呈现表主体的属性中。filter-placeholder
:在过滤器字段中用作占位符的文本filter-input-class
:将应用于过滤器文本输入的其他类filter-no-results
:过滤未返回结果时显示的文本对于每个table-column
列,都将呈现。它可以具有以下道具:
show
:(必填)此列中需要显示的数据中的属性名称。formatter
:一个函数,它将接收将显示的值和所有列属性。将显示此函数的返回值。这是一个例子label
:将在列顶部显示的标签。将此设置为空字符串不显示任何内容。如果不存在此属性,show
则将使用传递到的字符串。data-type
:如果应按数字对列进行排序,则将其设置为numeric
。如果您的列中包含日期,则将其设置为,date:
后跟日期格式sortable
:如果将其设置为,false
则在单击列标题时不会对该列进行排序sort-by
:您可以将此设置为中存在的任何属性data
。在对列进行排序时,该属性将用于排序,而不是中的属性show
。filterable
:如果设置为false
,则过滤时将不使用此列filter-on
:您可以将此设置为中存在的任何属性data
。过滤列时,该属性将用于过滤,而不是中的属性show
。hidden
:如果将其设置为,true
则该列将被隐藏。当您想按字段排序但不希望其可见时,此功能很有用。header-class
:传递的值将添加到class
columnsth
元素的属性中。cell-class
:传递的值将添加到class
columnstd
元素的属性中。