English | 简体中文

vue-snb-table Table 表格

Table 表格. 用于展示多条结构类似的数据，可对数据进行排序操作。

预览

页面预览: https://cherislive.github.io/projrct/vue-snb-table/

安装

$ npm install vue-snb-table

Import

Import using module

Import components to your project:

// in ES6 modules
import { SnbTable, SnbTableColumn, SnbTableHeader } from 'vue-snb-table';

// in CommonJS
const { SnbTable, SnbTableColumn, SnbTableHeader } = require('vue-snb-table');

// in Global variable
const { SnbTable, SnbTableColumn, SnbTableHeader } = VueSnbTable;

And register components:

Vue.component('snb-table', SnbTable);
Vue.component('snb-table-column', SnbTableColumn);
Vue.component('snb-table-header', SnbTableHeader);

Import using script tag

<script src="../node-modules/vue-snb-table/dist/index.js"></script>

const SnbTable = VueSnbTable.SnbTable;
const SnbTableColumn = VueSnbTable.SnbTableColumn;
const SnbTableHeader = VueSnbTable.SnbTableHeader;

new Vue({
  el: 'body',
  components: {
    'snb-table': SnbTable,
    'snb-table-column': SnbTableColumn,
    'snb-table-header': SnbTableHeader
  }
});

Usage

Work on a Vue instance:

<SnbTableHeader
  :columns="columns" 
  :colsWidth="colsWidth" 
/>
<snb-table>
  <snb-table-column prop="data1" label="data1" />
  <snb-table-column prop="data2" label="data2" />
  <snb-table-column prop="data3" label="data3">
    <template slot-scope="scope">{{scope.data3}}</template>
  </snb-table-column>
</snb-table>

Table

Attributes

| Option | Type | Description | Accepted Values | Default | | ----- | ----- | ----- | ----- | ----- | | data | Array | 显示的数据。 | - | - | | showHeader | Boolean | 是否显示表头。 | - | true | | headerFixed | Object | 固定表头。 | state: true/false | null | | defaultSort | Object | 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 | order: asc, desc | 如果只指定了prop, 没有指定order, 则默认顺序是ascending | | sortState | Object | 可以通过该属性设置排序列的 prop 和顺序。它的prop属性指定排序的列，order指定默认排序的顺序 | order: asc, desc | - | | headerColsWidth | Array | 表头各个列宽。 | - | - |

Events

| Event Name | Description | params | | ----- | ----- | ----- | | columnsReady | 当表格的列的数据状态加载完成的时候会触发该事件，该事件用于自定义表头的情况。 | columns | | sortChange | 当表格的排序条件发生变化的时候会触发该事件。 | {sort: {prop, order}, column} | | colsWidth | 当表格的数据发生变化的时候会触发该事件，返回各个列宽。 | widths | | distanXChange | 当拖动表格横向滚动的时候会触发该事件。 | width | | rowClick | 当某一行被点击时会触发该事件。| row |

Table-column

Attributes

| Option | Type | Description | Accepted Values | Default | | ----- | ----- | ----- | ----- | ----- | | prop | String | 对应列内容的字段名，也可以使用 property 属性。 | - | - | | label | String | 显示的标题。 | - | - | | align | String | 对齐方式。 | left/center/right | left | | width | String | 对应列的宽度。 | - | - | | fixed | String | 列是否固定在左侧。 | true, false | false | | sortable | Boolean | 对应列是否可以排序。 | true, false | false | | formatter | Function(row, column, cellValue, index) | 用来格式化内容。 | - | - |

Table-header

Attributes

| Option | Type | Description | Accepted Values | Default | | ----- | ----- | ----- | ----- | ----- | | columns | Array | 各个列属性。 | - | - | | colsWidth | Array | 各个列宽。 | - | - | | distanX | Number | 表格横向滚动的距离。 | left/center/right | left | | defaultSort | Object | 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 | order: asc, desc | 如果只指定了prop, 没有指定order, 则默认顺序是ascending | | sortState | Object | 可以通过该属性设置排序列的 prop 和顺序。它的prop属性指定排序的列，order指定默认排序的顺序 | order: asc, desc | - |

Events

| Event Name | Description | params | | ----- | ----- | ----- | | sortChange | 当表格的排序条件发生变化的时候会触发该事件。 | {sort: {prop, order}, column} | | headerColsWidth | 表头各个列宽。当表格的渲染完成的时候会触发该事件。 | widths |

Development

Watching with hot-reload:

$ npm run dev

Develop on real remote device:

$ npm run remote-dev {{ YOUR IP ADDRESS }}

License

MIT