Vue组件以对表进行过滤和排序 - vue-table-component

Vue组件以对表进行过滤和排序 - vue-table-component
插件名称 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分钟内记住使用的过滤器和排序。

Props

您可以将这些道具传递给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:传递的值将添加到classcolumnsth元素的属性中。
  • cell-class:传递的值将添加到classcolumnstd元素的属性中。