@aayushdrolia111/vue-table-component 中文文档教程

发布于 5年前 浏览 23 项目主页 更新于 3年前

??? 此包裹已被放弃 ????

我们不再在我们自己的项目中使用这个包,也无法再证明维护它所需的时间。 这就是我们选择放弃它的原因。 随意分叉我们的代码并维护您自己的副本或使用众多替代方案之一。

A straightforward Vue component to filter and sort tables

NPM 最新版本软件许可 构建状态npm


警告:功能冻结 ????

这个包的第 1 版由于其构建方式而变得非常难以维护。 我们也有太多的功能要求,我们也不能全部满足。 我们正在开发此软件包的 v2,不会添加任何新功能或接受 v1 的功能 PR。


这个 repo 包含一个 Vue 组件,可以呈现一个可过滤和可排序的表格。 它的目标是非常轻巧且易于使用。 它支持异步检索数据和分页

下面是一个如何使用它的示例:

<table-component
     :data="[
          { firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', birthday: '04/10/1940', songs: 72 },
          { firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', birthday: '18/06/1942', songs: 70 },
          { firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', birthday: '25/02/1943', songs: 22 },
          { firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', birthday: '07/07/1940', songs: 2 },
     ]"
     sort-by="songs"
     sort-order="asc"
>
     <table-column show="firstName" label="First name"></table-column>
     <table-column show="lastName" label="Last name"></table-column>
     <table-column show="instrument" label="Instrument"></table-column>
     <table-column show="songs" label="Songs" data-type="numeric"></table-column>
     <table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
     <table-column label="" :sortable="false" :filterable="false">
         <template slot-scope="row">
            <a :href="`#${row.firstName}`">Edit</a>
         </template>
     </table-column>
 </table-component>

一个很酷的功能是该表将使用过的过滤器和排序缓存 15 分钟。 所以如果你刷新页面,过滤器和排序仍然会被使用。

Demo

想要查看组件的运行情况? 没问题。 这是一个演示

Installation

您可以通过 yarn:

yarn add vue-table-component

或 npm 安装包:

npm install vue-table-component --save

接下来,您必须注册该组件。 最常见的用例是在全球范围内执行此操作。

//in your app.js or similar file
import Vue from 'vue';
import { TableComponent, TableColumn } from 'vue-table-component';

Vue.component('table-component', TableComponent);
Vue.component('table-column', TableColumn);

或者,您可以这样做来注册组件:

import TableComponent from 'vue-table-component';

Vue.use(TableComponent);

Browser Support

vue-table-component 具有与 Vue 相同的浏览器支持(请参阅 https://github.com/vuejs/vue)。 但是,您可能需要填充 Array.prototype .find IE 支持的方法。

Usage

这是一个关于如何使用该组件的简单示例。

<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: (required) the data the component will operate on. This can either be an array or a function
  • show-filter: set this to false to not display the filter field.
  • show-caption: set this to false to not display the caption field which shows the current active filter.
  • sort-by: the property in data on which to initially sort.
  • sort-order: the initial sort order.
  • cache-lifetime: the lifetime in minutes the component will cache the filter and sorting.
  • cache-key: if you use multiple instances of table-component on the same page you must set this to a unique value per instance.
  • table-class: the passed value will be added to the class attribute of the rendered table
  • thead-class: the passed value will be added to the class attribute of the rendered table head.
  • tbody-class: the passed value will be added to the class attribute of the rendered table body.
  • filter-placeholder: the text used as a placeholder in the filter field
  • filter-input-class: additional classes that you will be applied to the filter text input
  • filter-no-results: the text displayed when the filtering returns no results

对于每个 table-column,将呈现一列。 它可以有这些道具:

  • show: (required) the property name in the data that needs to be shown in this column.
  • formatter: a function the will receive the value that will be displayed and all column properties. The return value of this function will be displayed. Here's an example
  • label: the label that will be shown on top of the column. Set this to an empty string to display nothing. If this property is not present, the string passed to show will be used.
  • data-type: if your column should be sorted numerically set this to numeric. If your column contains dates set it to date: followed by the format of your date
  • sortable: if you set this to false then the column won't be sorted when clicking the column header
  • sort-by: you can set this to any property present in data. When sorting the column that property will be used to sort on instead of the property in show.
  • filterable: if this is set to false than this column won't be used when filtering
  • filter-on: you can set this to any property present in data. When filtering the column that property will be used to filter on instead of the property in show.
  • hidden: if you set this to true then the column will be hidden. This is useful when you want to sort by a field but don't want it to be visible.
  • header-class: the passed value will be added to the class attribute of the columns th element.
  • cell-class: the passed value will be added to the class attribute of the columns td element.

Listeners

table-component 目前发出一个自定义事件:

  • @rowClick: is fired when a row is clicked. Receives the row data as it's event payload.

Modifying the used texts and CSS classes

如果你想修改内置文本或类,你可以全局传递设置。 您可以使用文档中的 CSS 作为您自己样式的起点。

import TableComponent from 'vue-table-component';

TableComponent.settings({
    tableClass: '',
    theadClass: '',
    tbodyClass: '',
    filterPlaceholder: 'Filter table…',
    filterNoResults: 'There are no matching rows',
});

您还可以在 Vue 插件安装钩子上提供自定义设置:

import Vue from 'vue';
import TableComponent from 'vue-table-component';

Vue.use(TableComponent, {
    tableClass: '',
    theadClass: '',
    tbodyClass: '',
    filterPlaceholder: 'Filter table…',
    filterNoResults: 'There are no matching rows',
});

Retrieving data asynchronously

该组件可以异步方式获取数据。 最常见的用例是从服务器获取数据。

要使用该功能,您应该将一个函数传递给 data 属性。 该函数将接收一个带有filtersortpage 的对象。 您可以使用这些参数来获取正确的数据。 该函数应该返回一个具有以下属性的对象:

  • data: (required) the data that should be displayed in the table.
  • pagination: (optional) this should be an object with keys currentPage and totalPages. If totalPages is higher than 1 pagination links will be displayed.

下面是一个示例:

<template>
   <div id="app">
       <table-component :data="fetchData">
           <table-column show="firstName" label="First name"></table-column>
       </table-component>
   </div>
</template>

<script>
    import axios from 'axios';

    export default {
        methods: {
            async fetchData({ page, filter, sort }) {
                const response = await axios.get('/my-endpoint', { page });

                // An object that has a `data` and an optional `pagination` property
                return response;
            }
        }
    }
</script>

如果您出于某种原因需要手动刷新表格数据,您可以调用组件上的 refresh 方法。

<table-component :data="fetchData" ref="table">
    <!-- Columns... -->
</table-component>
this.$refs.table.refresh();

Formatting values

您可以使用作用域插槽在值显示之前对其进行格式化。 这是一个简单的示例:

<table-component
     :data="[
          { firstName: 'John', songs: 72 },
          { firstName: 'Paul', songs: 70 },
          { firstName: 'George', songs: 22 },
          { firstName: 'Ringo', songs: 2 },
     ]"
>

     <table-column label="My custom column" :sortable="false" :filterable="false">
         <template slot-scope="row">
            {{ row.firstName }} wrote {{ row.songs }} songs.
         </template>
     </table-column>
 </table-component>

或者,您可以将函数传递给 formatter 属性。 下面是一个使用该功能的示例 Vue 组件。

<template>
    <table-component
        :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
        <table-column show="firstName" label="First name" :formatter="formatter"></table-column>
    </table-component>
</template>

<script>
export default {
    methods: {
        formatter(value, rowProperties) {
            return `Hi, I am ${value}`;
        },
    },
}
</script>

这将显示值 Hi, I am JohnHi, I am Paul

Adding table footer <tfoot> information

有时在表格底部添加信息(如摘要数据)可能很有用。 名为 tfoot 的插槽可用,它接收所有 rows 数据以进行动态计算,或者您可以直接显示父范围中可用的任何数据。

<table-component
    :data="[{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]">
    <table-column show="firstName" label="First name"></table-column>
    <table-column show="songs" label="Songs" data-type="numeric"></table-column>
    <template slot="tfoot" slot-scope="{ rows }">
        <tr>
            <th>Total Songs:</th>
            <th>{{ rows.reduce((sum, value) => { return sum + value.data.songs; }, 0) }}</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </template>
</table-component>

<template>
    <table-component
        :data="tableData">
        <table-column show="firstName" label="First name"></table-column>
        <table-column show="songs" label="Songs" data-type="numeric"></table-column>
        <template slot="tfoot">
            <tr>
                <th>Total Songs:</th>
                <th>{{ totalSongs }}</th>
            </tr>
        </template>
    </table-component>
</template>
<script>
export default {
    computed: {
        totalSongs () {
            return this.tableData.reduce(sum, value => {
                return sum + value.songs;
            }, 0);
        }
    },
    data () {
        return {
            tableData: [{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]
        }
    }
}
</script>

注意:rows 槽作用域数据包括由表组件(例如 columns)收集的更多信息,rows.data 是原始 data 信息所在。

Changelog

请查看 CHANGELOG 以了解最近更改的更多信息。

Testing

yarn test

Contributing

有关详细信息,请参阅CONTRIBUTING

Postcardware

您可以自由使用此软件包,但如果它适用于您的生产环境,我们非常感谢您从您的家乡寄给我们一张明信片,并说明您正在使用我们的哪些软件包。

我们的地址是:Spatie, Samberstraat 69D, 2060 Antwerp, Belgium。

我们会在公司网站上发布所有收到的明信片。

Security

如果您发现任何与安全相关的问题,请联系 freek@spatie.be 而不要使用问题跟踪器。

Credits

分页组件的灵感来自 Laracasts.com 上的这一课

Support us

Spatie 是一家位于比利时安特卫普的网页设计机构。 您可以在我们的网站 上找到我们所有开源项目的概览。

您的业​​务是否依赖于我们的贡献? 在 Patreon 上联系我们并支持我们。 所有承诺都将致力于分配劳动力进行维护和新的很棒的东西。

License

麻省理工学院许可证(麻省理工学院)。 请参阅许可证文件了解更多信息。

???? THIS PACKAGE HAS BEEN ABANDONED ????

We don't use this package anymore in our own projects and cannot justify the time needed to maintain it anymore. That's why we have chosen to abandon it. Feel free to fork our code and maintain your own copy or use one of the many alternatives.

A straightforward Vue component to filter and sort tables

Latest Version on NPMSoftware LicenseBuild Statusnpm


???? WARNING: FEATURE FREEZE ????

Version 1 of this package has become very hard to maintain due to the way it's built up. We also have too many feature requests, which we can't all cater too. We're working on v2 of this package, and won't be adding any new features or accepting feature PR's for v1.


This repo contains a Vue component that can render a filterable and sortable table. It aims to be very lightweight and easy to use. It has support for retrieving data asynchronously and pagination.

Here's an example of how you can use it:

<table-component
     :data="[
          { firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', birthday: '04/10/1940', songs: 72 },
          { firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', birthday: '18/06/1942', songs: 70 },
          { firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', birthday: '25/02/1943', songs: 22 },
          { firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', birthday: '07/07/1940', songs: 2 },
     ]"
     sort-by="songs"
     sort-order="asc"
>
     <table-column show="firstName" label="First name"></table-column>
     <table-column show="lastName" label="Last name"></table-column>
     <table-column show="instrument" label="Instrument"></table-column>
     <table-column show="songs" label="Songs" data-type="numeric"></table-column>
     <table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
     <table-column label="" :sortable="false" :filterable="false">
         <template slot-scope="row">
            <a :href="`#${row.firstName}`">Edit</a>
         </template>
     </table-column>
 </table-component>

A cool feature is that the table caches the used filter and sorting for 15 minutes. So if you refresh the page, the filter and sorting will still be used.

Demo

Want to see the component in action? No problem. Here's a demo.

Installation

You can install the package via yarn:

yarn add vue-table-component

or npm:

npm install vue-table-component --save

Next, you must register the component. The most common use case is to do that globally.

//in your app.js or similar file
import Vue from 'vue';
import { TableComponent, TableColumn } from 'vue-table-component';

Vue.component('table-component', TableComponent);
Vue.component('table-column', TableColumn);

Alternatively you can do this to register the components:

import TableComponent from 'vue-table-component';

Vue.use(TableComponent);

Browser Support

vue-table-component has the same browser support as Vue (see https://github.com/vuejs/vue). However, you might need to polyfill the Array.prototype.find method for IE support.

Usage

Here's a simple example on how to use the 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>

This will render a table that is both filterable and sortable. A filter field will be displayed right above the table. If your data contains any html we will filter that out when filtering. You can sort the table by clicking on the column headers. By default it will remember the used filter and sorting for the next 15 minutes.

Props

You can pass these props to table-component:

  • data: (required) the data the component will operate on. This can either be an array or a function
  • show-filter: set this to false to not display the filter field.
  • show-caption: set this to false to not display the caption field which shows the current active filter.
  • sort-by: the property in data on which to initially sort.
  • sort-order: the initial sort order.
  • cache-lifetime: the lifetime in minutes the component will cache the filter and sorting.
  • cache-key: if you use multiple instances of table-component on the same page you must set this to a unique value per instance.
  • table-class: the passed value will be added to the class attribute of the rendered table
  • thead-class: the passed value will be added to the class attribute of the rendered table head.
  • tbody-class: the passed value will be added to the class attribute of the rendered table body.
  • filter-placeholder: the text used as a placeholder in the filter field
  • filter-input-class: additional classes that you will be applied to the filter text input
  • filter-no-results: the text displayed when the filtering returns no results

For each table-column a column will be rendered. It can have these props:

  • show: (required) the property name in the data that needs to be shown in this column.
  • formatter: a function the will receive the value that will be displayed and all column properties. The return value of this function will be displayed. Here's an example
  • label: the label that will be shown on top of the column. Set this to an empty string to display nothing. If this property is not present, the string passed to show will be used.
  • data-type: if your column should be sorted numerically set this to numeric. If your column contains dates set it to date: followed by the format of your date
  • sortable: if you set this to false then the column won't be sorted when clicking the column header
  • sort-by: you can set this to any property present in data. When sorting the column that property will be used to sort on instead of the property in show.
  • filterable: if this is set to false than this column won't be used when filtering
  • filter-on: you can set this to any property present in data. When filtering the column that property will be used to filter on instead of the property in show.
  • hidden: if you set this to true then the column will be hidden. This is useful when you want to sort by a field but don't want it to be visible.
  • header-class: the passed value will be added to the class attribute of the columns th element.
  • cell-class: the passed value will be added to the class attribute of the columns td element.

Listeners

The table-component currently emits one custom event:

  • @rowClick: is fired when a row is clicked. Receives the row data as it's event payload.

Modifying the used texts and CSS classes

If you want to modify the built in text or classes you can pass settings globally. You can use the CSS from the docs as a starting point for your own styling.

import TableComponent from 'vue-table-component';

TableComponent.settings({
    tableClass: '',
    theadClass: '',
    tbodyClass: '',
    filterPlaceholder: 'Filter table…',
    filterNoResults: 'There are no matching rows',
});

You can also provide the custom settings on Vue plugin install hook:

import Vue from 'vue';
import TableComponent from 'vue-table-component';

Vue.use(TableComponent, {
    tableClass: '',
    theadClass: '',
    tbodyClass: '',
    filterPlaceholder: 'Filter table…',
    filterNoResults: 'There are no matching rows',
});

Retrieving data asynchronously

The component can fetch data in an asynchronous manner. The most common use case for this is fetching data from a server.

To use the feature you should pass a function to the data prop. The function will receive an object with filter, sort and page. You can use these parameters to fetch the right data. The function should return an object with the following properties:

  • data: (required) the data that should be displayed in the table.
  • pagination: (optional) this should be an object with keys currentPage and totalPages. If totalPages is higher than 1 pagination links will be displayed.

Here's an example:

<template>
   <div id="app">
       <table-component :data="fetchData">
           <table-column show="firstName" label="First name"></table-column>
       </table-component>
   </div>
</template>

<script>
    import axios from 'axios';

    export default {
        methods: {
            async fetchData({ page, filter, sort }) {
                const response = await axios.get('/my-endpoint', { page });

                // An object that has a `data` and an optional `pagination` property
                return response;
            }
        }
    }
</script>

If you for some reason need to manually refresh the table data, you can call the refresh method on the component.

<table-component :data="fetchData" ref="table">
    <!-- Columns... -->
</table-component>
this.$refs.table.refresh();

Formatting values

You can format values before they get displayed by using scoped slots. Here's a quick example:

<table-component
     :data="[
          { firstName: 'John', songs: 72 },
          { firstName: 'Paul', songs: 70 },
          { firstName: 'George', songs: 22 },
          { firstName: 'Ringo', songs: 2 },
     ]"
>

     <table-column label="My custom column" :sortable="false" :filterable="false">
         <template slot-scope="row">
            {{ row.firstName }} wrote {{ row.songs }} songs.
         </template>
     </table-column>
 </table-component>

Alternatively you can pass a function to the formatter prop. Here's an example Vue component that uses the feature.

<template>
    <table-component
        :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
        <table-column show="firstName" label="First name" :formatter="formatter"></table-column>
    </table-component>
</template>

<script>
export default {
    methods: {
        formatter(value, rowProperties) {
            return `Hi, I am ${value}`;
        },
    },
}
</script>

This will display values Hi, I am John and Hi, I am Paul.

Adding table footer <tfoot> information

Sometimes it can be useful to add information to the bottom of the table like summary data. A slot named tfoot is available and it receives all of the rows data to do calculations on the fly or you can show data directly from whatever is available in the parent scope.

<table-component
    :data="[{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]">
    <table-column show="firstName" label="First name"></table-column>
    <table-column show="songs" label="Songs" data-type="numeric"></table-column>
    <template slot="tfoot" slot-scope="{ rows }">
        <tr>
            <th>Total Songs:</th>
            <th>{{ rows.reduce((sum, value) => { return sum + value.data.songs; }, 0) }}</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </template>
</table-component>

OR

<template>
    <table-component
        :data="tableData">
        <table-column show="firstName" label="First name"></table-column>
        <table-column show="songs" label="Songs" data-type="numeric"></table-column>
        <template slot="tfoot">
            <tr>
                <th>Total Songs:</th>
                <th>{{ totalSongs }}</th>
            </tr>
        </template>
    </table-component>
</template>
<script>
export default {
    computed: {
        totalSongs () {
            return this.tableData.reduce(sum, value => {
                return sum + value.songs;
            }, 0);
        }
    },
    data () {
        return {
            tableData: [{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]
        }
    }
}
</script>

Note: rows slot scope data includes more information gathered by the Table Component (e.g. columns) and rows.data is where the original data information is located.

Changelog

Please see CHANGELOG for more information what has changed recently.

Testing

yarn test

Contributing

Please see CONTRIBUTING for details.

Postcardware

You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.

We publish all received postcards on our company website.

Security

If you discover any security related issues, please contact freek@spatie.be instead of using the issue tracker.

Credits

The Pagination component was inspired by this lesson on Laracasts.com.

Support us

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

Does your business depend on our contributions? Reach out and support us on Patreon. All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.

License

The MIT License (MIT). Please see License File for more information.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文