vue 网格组件_Vue.js 2网格表组件

vue 网格组件

Vue表2 (Vue Tables 2)

A Vue.js 2 grid Tables components.

Vue.js 2网格表组件。

现场演示 (Live Demo)

用法 (Usage)

依存关系 (Dependencies)

  • Vue.js (>=2.0)

    Vue.js(> = 2.0)

  • Server Side: axios OR vue-resource (>=0.9.0) OR jQuery for the AJAX requests

    服务器端:axios或vue-resource(> = 0.9.0)或AJAX请求的jQuery

兼容性 (Compatibility)

  • Vuex (>=2.0)

    Vuex(> = 2.0)

  • Bootstrap 3 compatible html output

    Bootstrap 3兼容的html输出

安装 (Installation)

npm install vue-tables-2

Require the script:


import {ServerTable, ClientTable, Event} from 'vue-tables-2';

注册组件 (Register the component(s))

Vue.use(ClientTable, [options], [useVuex], [customTemplate]);



Vue.use(ServerTable, [options], [useVuex], [customTemplate]);
  • useVuex is a boolean indicating whether to use vuex for state management, or manage state on the component itself. If you set it to true you must add a name prop to your table, which will be used to to register a module on your store. Use vue-devtools to look under the hood and see the current state.

    useVuex是一个布尔值,指示是使用vuex进行状态管理,还是管理组件本身上的状态。 如果将其设置为true ,则必须在表中添加name道具,该name道具将用于在商店中注册模块。 使用vue-devtools深入了解并查看当前状态。

  • customTemplate argument allows you to pass a custom template for the entire table. You can find the main template file under lib/template.js, which in turn requires the partials in the template folder. The template is written using jsx, so you will need a jsx compiler to modify it (the package is using the compiled version under the compiled folder). Copy it to your project and modify to your needs.

    customTemplate参数允许您为整个表传递自定义模板。 您可以在lib/template.js下找到主模板文件,该文件又需要template文件夹中的partials。 该模板是使用jsx编写的,因此您将需要一个jsx编译器对其进行修改(该包使用的是已compiled文件夹下的已编译版本)。 将其复制到您的项目中,然后根据需要进行修改。

Note: The template file is a function that receives a source parameter (client or server). E.g:

注意:模板文件是一种接收source参数( clientserver )的函数。 例如:

Vue.use(ClientTable, {}, false, require('./template.js')('client'))

客户端 (Client Side)

Add the following element to your page wherever you want it to render. Make sure to wrap it with a parent element you can latch your vue instance into.

将以下元素添加到您想要呈现的页面上。 确保将其与可以锁定vue实例的父元素一起包装。

<div id="people">
  <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>

Create a new Vue instance (You can also nest it within other components). An example works best to illustrate the syntax:

创建一个新的Vue实例(您也可以将其嵌套在其他组件中)。 一个示例最能说明该语法:

new Vue({
data: {
columns: ['id','name','age'],
tableData: [
{id:1, name:"John",age:"20"},
{id:2, name:"Jane",age:"24"},
{id:3, name:"Susan",age:"16"},
{id:4, name:"Chris",age:"55"},
{id:5, name:"Dan",age:"40"}
options: {
// see the options API

You can access the filtered dataset at any given moment by fetching the filteredData computed property of the table, using ref as a pointer (this.$refs.myTable.filteredData);

您可以在任何给定的时刻通过使用ref作为指针获取表的filteredData计算属性来访问已过滤数据集( this.$refs.myTable.filteredData );

Important: when loading data asynchronously add a v-if conditional to the component along with some loaded flag, so it will only compile once the data is attached.


服务器端 (Server side)

<div id="people">
  <v-server-table url="/people" :columns="columns" :options="options"></v-server-table>



new Vue({
el: "#people",
data: {
columns: ['id','name','age'],
options: {
// see the options API

All the data is passed in the following GET parameters:


  • query,


  • limit,


  • page,


  • orderBy,


  • ascending,


  • byColumn.


You need to return a JSON object with two properties:


  • data : array - An array of row objects with identical keys.


  • count: number - Total count before limit.

    countnumber -总极限之前计数。

Note: If you are calling a foreign API or simply want to use your own keys, refer to the responseAdapter option.


自定义请求功能 (Custom Request Function)

by default the library supports JQuery, vue-resource and axios as ajax libraries. If you wish to use a different library, or somehow alter the request (e.g add auth headers, or manipulate the data) use the requestFunction option. E.g:

默认情况下,该库支持JQueryvue-resourceaxios作为ajax库。 如果您希望使用其他库,或者以某种方式更改请求(例如,添加身份验证标头或操作数据),请使用requestFunction选项。 例如:

  requestFunction: function(data) {
    return axios.get(this.url, { params: data }).catch(function (e) {
      this.dispatch('error', e);

实作 (Implementations)

I have included an Eloquent implementation for Laravel Users.


If you happen to write other implementations for PHP or other languages, a pull request would be most welcome, under the following guidelines:


  1. Include the class under ./server/{language}.


  2. Name it according to convention: {concrete}VueTables.

    根据约定将其命名为: {concrete}VueTables

  3. if this is the first implementation in this language add an interface similar to the one found in the PHP folder.


  4. Have it implement the interface.


  5. TEST IT.


范本 (Templates)

Templates allow you to wrap your cells with vue-compiled HTML.


Their syntax is similar to that of render functions, as it leverages the virtual DOM to bind the templates into the main table template.



It is recommended to use JSX, which closely resembles HTML, to write the templates (To compile jsx you need to install the vue jsx transform).

建议使用与HTML非常相似的JSX编写模板(要编译jsx,您需要安装vue jsx transform )。



data : {
columns: ['erase'],
options: {
templates: {
erase: function(h, row) {
return <delete id={}></delete>

The first parameter is the h scope used to compile the element. It MUST be called h. The second parameter gives you access to the row data. In addition a this context will be available, which refers to the root vue instance. This allows you to call your own instance methods directly. Note: when using a .vue file jsx must be imported from a dedicated .jsx file in order to compile correctly. E.g

第一个参数是用于编译元素的h范围。 它必须称为h 。 第二个参数使您可以访问行数据。 另外, this上下文将可用,它指的是根vue实例。 这使您可以直接调用自己的实例方法。 注意:使用.vue文件jsx必须从专用.jsx文件导入.jsx才能正确编译。 例如



export default function(h, row) {
return <a class='fa fa-edit' href={'#/' + + '/edit'}></a>



  import edit from './edit'

  templates: {

Vue组件 (Vue Component)

A Second option to for creating templates is to encapsulate the template within a component and pass the name. The component must have a data property, which will receive the row object. E.g:

创建模板的第二种方法是将模板封装在组件中并传递名称。 该组件必须具有data属性,该属性将接收行对象。 例如:

Vue.component('delete', {
template:`<a class='delete' @click='erase'></a>`,
erase() {
let id =; // delete the item
options: {
templates: {
erase: 'delete'

This method allows you to also use single page .vue files for displaying the template data E.g: edit.vue


  <a class="fa fa-edit" :href="edit(">Edit</a>
  export default {



  import edit from './edit'


范围插槽 (Scoped Slots)

If you are using Vue 2.1.0 and above, you can use scoped slots to create templates:

如果您使用的是Vue 2.1.0及更高版本,则可以使用作用域插槽创建模板:

<v-client-table :data="entries" :columns="['id', 'name' ,'age', 'edit']">
  <template slot="edit" scope="props">
      <a class="fa fa-edit" :href="edit("></a>



  • To use components in your templates they must be declared globally using Vue.component().

    要在模板中使用组件,必须使用Vue.component() 全局声明它们。

  • Templates must be declared in the columns prop

    模板必须在props columns声明

Note: Don't include HTML directly in your dataset, as it will be parsed as plain text.


CSS Note: to center the pagination apply text-align:center to the wrapping element


子行 (Child Rows)

Child rows allow for a custom designed output area, namely a hidden child row underneath each row, whose content you are free to set yourself.


When using the childRow option you must pass a unqiue id property for each row, which is used to track the current state. If your identifer key is not id, use the uniqueKey option to set it.

使用childRow选项时,必须为每行传递一个unqiue id属性,该属性用于跟踪当前状态。 如果您的标识符键不是id ,请使用uniqueKey选项进行设置。

The syntax is identincal to that of templates:


childRow: function(h, row) {
return <div>My custom content for row {}</div>

Or you can pass a component name: (See Templates above for a complete example)

或者,您可以传递组件名称:(有关完整示例,请参见上面的模板 )

childRow: 'row-component'

When the plugin detects a childRow function it appends the child rows and prepends to each row an additional toggler column with a span you can design to your liking.


Example styling (also found in style.css):


.VueTables__child-row-toggler {
line-height: 16px;
display: block;
margin: auto;
text-align: center;

.VueTables__child-row-toggler--closed::before {
content: "+";

.VueTables__child-row-toggler--open::before  {
content: "-";

You can also trigger the child row toggler programmtically. E.g, to toggle the row with an id of 4:

您还可以通过编程方式触发子行切换器。 例如,要切换ID为4的行:

this.$refs.myTable.toggleChildRow(4); // replace myTable with your own ref

方法 (Methods)

Call methods on your instance using the ref attribute.


  • setPage(page)


  • setLimit(recordsPerPage)


  • setOrder(column, isAscending)

    setOrder(column, isAscending)

  • setFilter(query) - query should be a string, or an object if filterByColumn is set to true.

    setFilter(query) - query应该是字符串,或者如果filterByColumn设置为true filterByColumn对象。

  • refresh() Server component only


大事记 (Events)

Using Custom Events (For child-parent communication):


<v-server-table :columns="columns" url="/getData" @loaded="onLoaded"></v-server-table>
  • Using the event bus:


Event.$on('vue-tables.loaded', function (data) {
// Do something

Note: If you are using the bus and want the event to be "namespaced", so you can distinguish bewteen different tables on the same page, use the name prop. The event name will then take the shape of vue-tables.tableName.eventName.

注意:如果您正在使用总线,并且希望对事件进行“命名空间”,则可以在同一页面上区分出以下七个不同的表,请使用name prop。 然后,事件名称将采用vue-tables.tableName.eventName

  • Using Vuex:


['tableName/LOADED'] (state, data) {
// Do something
  • vue-tables.filter / tableName/FILTER

    vue-tables.filter / tableName/FILTER

Fires off when a filter is changed. Sends through the name and value in case of column filter, or just the value in case of the general filter

更换滤镜时触发。 如果是列过滤器,则通过名称和值发送;如果是常规过滤器,则仅通过值发送

  • vue-tables.filter::colName


Same as above, only this one has the name attached to the event itself, and only sends through the value. Releveant only for non-vuex tables with filterByColumn set to true.

与上述相同,只有该名称具有附加到事件本身的名称,并且仅通过值发送。 仅针对filterByColumn设置为true的非vuex表。

  • vue-tables.loading / tableName/LOADING (server)

    vue-tables.loading / tableName/LOADING (服务器)

Fires off when a request is sent to the server. Sends through the request data.

将请求发送到服务器时触发。 通过请求数据发送。

  • vue-tables.loaded / tableName/LOADED (server)

    vue-tables.loaded / tableName/LOADED (服务器)

Fires off after the response data has been attached to the table. Sends through the response.

将响应数据附加到表后触发。 通过响应发送。

You can listen to those complementary events on a parent component and use them to add and remove a loading indicator, respectively.


  • vue-tables.pagination / tableName/PAGINATION

    vue-tables.pagination / tableName/PAGINATION

Fires off whenever the user changes a page. Send through the page number.

用户更改页面时触发。 通过页码发送。

  • vue-tables.error / tableName/ERROR (server)

    vue-tables.error / tableName/ERROR (服务器)

Fires off if the server returns an invalid code. Sends through the error

如果服务器返回无效代码,则触发。 通过错误发送

  • vue-tables.row-click / tableName/ROW_CLICK

    vue-tables.row-click / tableName/ROW_CLICK

Fires off after a row was clicked. sends through the row and the mouse event. When using the client component, if you want to recieve the original row, so that it can be directly mutated, you must have a unique row identifier. The key defaults to id, but can be changed using the uniqueKey option.

单击一行后触发。 通过行和鼠标事件发送。 使用客户端组件时,如果要接收原始行以便可以直接对其进行更改,则必须具有唯一的行标识符。 密钥默认为id ,但可以使用uniqueKey选项进行更改。

自定义过滤器 (Custom Filters)

Custom filters allow you to integrate your own filters into the plugin using Vue's events system.


客户端过滤器 (Client Side Filters)

  1. use the customFilters option to declare your filters, following this syntax:


customFilters: [{
callback: function(row, query) {
return[0] == query;
  1. Using the event bus:


Event.$emit('vue-tables.filter::alphabet', query);
  1. Using vuex:


this.$store.commit('myTable/SET_CUSTOM_FILTER', {filter:'alphabet', value:query})

服务器端过滤器 (Server Side Filters)

A. use the customFilters option to declare your filters, following this syntax:


customFilters: ['alphabet','age-range']

B. the same as in the client component.


列表过滤器 (List Filters)

When filtering by column (option filterByColumn:true), the listColumns option allows for filtering columns whose values are part of a list, using a select box instead of the default free-text filter.

当按列过滤时(选项filterByColumn:true ), listColumns选项允许使用选择框而不是默认的自由文本过滤器来过滤其值是列表一部分的列。

For example:


options: {
filterByColumn: true,
listColumns: {
animal: [
{ id: 1, text: 'Dog' },
{ id: 2, text: 'Cat' },
{ id: 3, text: 'Tiger' },
{ id: 4, text: 'Bear' }

Note: The values of this column should correspond to the id's passed to the list. They will be automatically converted to their textual representation.

注意:此列的值应对应于传递给列表的id 。 它们将自动转换为文本表示形式。

自定义排序 (Custom Sorting)

客户端排序 (Client Side Sorting)

Sometimes you may one to override the default sorting logic which is applied uniformly to all columns. To do so use the customSorting option. This is an object that recieves custom logic for specific columns. E.g, to sort the name column by the last character:

有时,您可能会覆盖统一应用于所有列的默认排序逻辑。 为此,请使用customSorting选项。 该对象接收特定列的自定义逻辑。 例如,按最后一个字符对name列进行排序:

name: function(ascending) {
return function(a, b) {
var lastA =[].toLowerCase();
var lastB =[].toLowerCase();

if (ascending)
return lastA <= lastB?1:-1;

return lastA >= lastB?1:-1;

服务器端排序 (Server Side Sorting)

This depends entirely on your backend implemetation as the library sends the sorting direction trough the request.


多重排序 (Multiple Sorting)

Multiple sorting allows you to sort recursively by multiple columns. Simply put, when the primary column (i.e the column the user is currently sorting) has two or more identical items, their order will be determined by a secondary column, and so on, until the list of columns is exhausted.

多重排序使您可以按多个列递归排序。 简而言之,当主列(即用户当前正在排序的列)具有两个或更多相同的项目时,它们的顺序将由第二列确定,依此类推,直到列的列表用完为止。

Example usage:



The above code means that when the user is sorting by name and identical names are compared, their order will be determined by the age column. If the ages are also identical the birth_date column will determine the order. The matchDir property tells the plugin whether the secondary sorting should match the direction of the primary column (i.e ascending/descending), or not.

上面的代码意味着,当用户按name排序并比较相同的名称时,其顺序将由“ age列确定。 如果年龄也相同,则birth_date列将确定顺序。 matchDir属性告诉插件辅助排序是否应该与主列的方向匹配(即升/降)。

In addition to programmatically setting the sorting in advance, by default the user can also use Shift+Click to build his own sorting logic in real time. To disable this option set clientMultiSorting to false.

除了预先以编程方式设置排序方式外,默认情况下,用户还可以使用Shift + Click实时构建自己的排序逻辑。 要禁用此选项,请将clientMultiSorting设置为false

On the server component this behaviour is disabled by default, because it requires addtional server logic to handle the request. To enable it set serverMultiSorting to true. The request will then contain a multiSort array, if applicable.

在服务器组件上,默认情况下禁用此行为,因为它需要其他服务器逻辑来处理请求。 要启用它,请将serverMultiSorting设置为true 。 然后,该请求将包含一个multiSort数组(如果适用)。


vue 网格组件

  • 0
  • 0
  • 1
  • 扫一扫,分享海报

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
钱包余额 0