此仓库包含一个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元素的属性中。

---

官网：https://github.com/spatie/vue-table-component

演示：https://www.vue365.cn/code_demo.php?id=3736

GitHub下载：https://github.com/spatie/vue-table-component/archive/master.zip