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

vue 网格组件

Vue表2 (Vue Tables 2)

A Vue.js 2 grid Tables components.

Vue.js 2网格表组件。

现场演示 (Live Demo)

https://jsfiddle.net/matfish2/823jzuzc/

https://jsfiddle.net/matfish2/823jzuzc/

用法 (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]);

Or/And:

或/和:

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>
</div>

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

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

new Vue({
el:"#people",
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.

重要提示:异步加载数据时,将v-if条件以及一些已loaded标志添加到组件中,因此仅在附加数据后才进行编译。

服务器端 (Server side)

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

Javascript:

Javascript:

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

All the data is passed in the following GET parameters:

所有数据都通过以下GET参数传递:

  • query,

    query

  • limit,

    limit

  • page,

    page

  • orderBy,

    orderBy

  • ascending,

    ascending

  • byColumn.

    byColumn

You need to return a JSON object with two properties:

您需要返回具有两个属性的JSON对象:

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

    dataarray具有相同键的行对象的数组。

  • 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.

注意:如果您正在调用外部API或只是想使用自己的键,请参考responseAdapter选项。

自定义请求功能 (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选项。 例如:

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

实作 (Implementations)

I have included an Eloquent implementation for Laravel Users.

我已经为Laravel用户提供了一个雄辩的实现

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

如果您碰巧为PHP或其他语言编写其他实现,则在以下准则下,拉取请求将是最受欢迎的:

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

    将类包括在./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.

    如果这是该语言的第一个实现,则添加一个类似于PHP文件夹中的接口。

  4. Have it implement the interface.

    让它实现接口。

  5. TEST IT.

    测试它。

范本 (Templates)

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

模板允许您使用Vue编译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.

它们的语法类似于render函数的语法,因为它利用虚拟DOM将模板绑定到主表模板中。

JSX (JSX)

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 )。

E.g.:

例如:

data : {
columns: ['erase'],
options: {
...
templates: {
erase: function(h, row) {
return <delete id={row.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才能正确编译。 例如

edit.jsx

edit.jsx

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

app.vue

应用程序

<script>
  import edit from './edit'

  templates: {
   edit
 }
</script>

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', {
props:['data'],
template:`<a class='delete' @click='erase'></a>`,
methods:{
erase() {
let id = this.data.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

此方法还允许您使用单页.vue文件来显示模板数据,例如:edit.vue

<template>
  <a class="fa fa-edit" :href="edit(data.id)">Edit</a>
</template>
<script>
  export default {
    props:['data'],
  }
</script>

app.vue

应用程序

<script>
  import edit from './edit'

  templates:{
   edit
 }
</script>

范围插槽 (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">
    <div>
      <a class="fa fa-edit" :href="edit(props.row.id)"></a>
    </div>
  </template>
</v-client-table>

Important:

重要事项

  • 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.

注意:不要将HTML直接包含在数据集中,因为它将被解析为纯文本。

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

CSS注意:要使分页居中,请将text-align:center应用于包装元素

子行 (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:

语法与模板相同:

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

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

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

options:{
...
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.

当插件检测到childRow函数时,它将子行附加并在每行前添加一个额外的切换器列,您可以根据自己的喜好设计一个span

Example styling (also found in style.css):

样式示例(也可以在style.css找到):

.VueTables__child-row-toggler {
width:16px;
height:16px;
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.

使用ref属性在您的实例上调用方法。

  • setPage(page)

    setPage(page)

  • setLimit(recordsPerPage)

    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

    refresh()仅服务器组件

大事记 (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:

    使用Vuex:

mutations:{
['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

    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.

自定义过滤器允许您使用Vue的事件系统将自己的过滤器集成到插件中。

客户端过滤器 (Client Side Filters)

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

    按照以下语法,使用customFilters选项声明您的过滤器:

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

    使用事件总线:

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

    使用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:

A.使用customFilters选项声明您的过滤器,遵循以下语法:

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

B. the same as in the client component.

B.与客户端组件相同。

列表过滤器 (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列进行排序:

customSorting:{
name: function(ascending) {
return function(a, b) {
var lastA = a.name[a.name.length-1].toLowerCase();
var lastB = b.name[b.name.length-1].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:

用法示例:

{
  ...
  multiSorting:{
  name:[
  {
  column:'age',
  matchDir:false
},
{
 column:'birth_date',
 matchDir:true
}
]
}
...
}

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数组(如果适用)。

翻译自: https://vuejsexamples.com/a-vue-js-2-grid-components/

vue 网格组件

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值