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参数( client或server )的函数。 例如：

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 load