# Vue-Vtable-Grid

- 😊 基于 Vue 2.0 开发；
- 👍 使用 [VTable](https://github.com/VisActor/VTable)

## 安装

```bash
npm i vue-vtable-grid -S
# OR
yarn add vue-vtable-grid -S
```

## 全局使用

```js
// main.js
import Vue from 'vue';
import App from './App.vue';
// ...
import vueVtableGrid from 'vue-vtable-grid';
Vue.use(vueVtableGrid);
// ...
new Vue({
  el: '#app',
  render: (h) => h(App),
});
```

```vue
<template>
  <div id="app">
    <vue-vtable-grid
      ref="table"
      @click-cell="clickCell"
      :records="records"
      :columns="columns"
      :options="options"
    />
  </div>
</template>

<script>
const generatePersons = (count) => {
  return Array.from(new Array(count)).map((_, i) => ({
    id: i + 1,
    email1: `${i + 1}@xxx.com`,
    name: `小明${i + 1}`,
    lastName: '王',
    date1: '2022年9月1日',
    tel: '000-0000-0000',
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
    city: 'beijing',
  }));
};
export default {
  name: 'App',
  components: {
    // vtableGrid,
  },
  data() {
    return {
      records: [],
      columns: [
        {
          field: 'id',
          title: 'ID ff',
          width: '1%',
          minWidth: 200,
          sort: true,
        },
        {
          field: 'email1',
          title: 'email',
          width: 200,
          sort: true,
        },
        {
          field: 'date1',
          title: 'birthday',
          width: 200,
        },
        {
          field: 'sex',
          title: 'sex',
          width: 100,
        },
        {
          field: 'tel',
          title: 'telephone',
          width: 150,
        },
        {
          field: 'work',
          title: 'job',
          width: 200,
        },
        {
          field: 'city',
          title: 'city',
          width: 150,
        },
      ],
      options: {},
    };
  },
  methods: {
    clickCell(obj) {
      console.log(obj);
    },
  },
  created() {
    this.records = generatePersons(100000);
    this.options = {
      dragHeaderMode: 'all',
    };
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
</style>
```

## 局部引入

### 基本用法

```vue
<template>
  <div id="app">
    <vue-vtable-grid
      ref="table"
      @click-cell="clickCell"
      :records="records"
      :columns="columns"
      :options="options"
    />
  </div>
</template>

<script>
import vueVtableGrid from 'vue-vtable-grid';
const generatePersons = (count) => {
  return Array.from(new Array(count)).map((_, i) => ({
    id: i + 1,
    email1: `${i + 1}@xxx.com`,
    name: `小明${i + 1}`,
    lastName: '王',
    date1: '2022年9月1日',
    tel: '000-0000-0000',
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
    city: 'beijing',
  }));
};
export default {
  name: 'App',
  components: {
    vueVtableGrid,
  },
  data() {
    return {
      records: [],
      columns: [
        {
          field: 'id',
          title: 'ID ff',
          width: '1%',
          minWidth: 200,
          sort: true,
        },
        {
          field: 'email1',
          title: 'email',
          width: 200,
          sort: true,
        },
        {
          field: 'date1',
          title: 'birthday',
          width: 200,
        },
        {
          field: 'sex',
          title: 'sex',
          width: 100,
        },
        {
          field: 'tel',
          title: 'telephone',
          width: 150,
        },
        {
          field: 'work',
          title: 'job',
          width: 200,
        },
        {
          field: 'city',
          title: 'city',
          width: 150,
        },
      ],
      options: {},
    };
  },
  methods: {
    clickCell(obj) {
      console.log(obj);
    },
  },
  created() {
    this.records = generatePersons(100000);
    this.options = {
      dragHeaderMode: 'all',
    };
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
</style>
```

## 属性

| 参数    | 说明                                                                         | 类型   | 可选值 | 默认值 |
| ------- | ---------------------------------------------------------------------------- | ------ | ------ | ------ |
| width   | 表格宽度                                                                     | String | —      | 100%   |
| height  | 表格高度                                                                     | String | —      | 100%   |
| records | 表格数据，详见[records](https://visactor.io/vtable/option/ListTable#records) | Array  | —      | —      |
| columns | 表格列，，详见[columns](https://visactor.io/vtable/option/ListTable#columns) | Array  | —      | —      |
| options | 表格配置项，详见[options](https://visactor.io/vtable/option/ListTable)       | Object | —      | —      |

## 事件

详细参数见：[Events](https://visactor.io/vtable/api/events)

| 事件名                      | 说明                                                           | 参数 |
| --------------------------- | -------------------------------------------------------------- | ---- |
| click-cell                  | 鼠标点击单元格事件                                             |      |
| dblclick-cell               | 鼠标双击单元格事件                                             |      |
| mousedown-cell              | 单元格上鼠标按下事件                                           |      |
| mouseup-cell                | 单元格鼠标松开事件                                             |      |
| selected-cell               | 单元格选中状态改变事件                                         |      |
| keydown                     | 键盘按下事件                                                   |      |
| mouseenter-table            | 鼠标进入表格事件                                               |      |
| mouseleave-table            | 鼠标离开表格事件                                               |      |
| mousemove-cell              | 鼠标在某个单元格上移动事件                                     |      |
| mouseenter-cell             | 鼠标进入单元格事件                                             |      |
| mouseleave-cell             | 鼠标离开单元格事件                                             |      |
| contextmenu-cell            | 单元格右键事件                                                 |      |
| resize-column               | 列宽调整事件                                                   |      |
| resize-column-end           | 列宽调整结束事件                                               |      |
| change-header-position      | 拖拽表头移动位置的事件                                         |      |
| sort-click                  | 点击排序图标事件                                               |      |
| freeze-click                | 点击固定列图标冻结或者解冻事件                                 |      |
| scroll                      | 滚动表格事件                                                   |      |
| dropdownmenu-click          | 点击下拉菜单图标事件                                           |      |
| mouseover-chart-symbol      | 鼠标经过迷你图标记事件                                         |      |
| drag-select-end             | 拖拽框选单元格鼠标松开事件                                     |      |
| dropdown-icon-click         | 点击下拉菜单按钮                                               |      |
| dropdown-menu-clear         | 清空下拉菜单事件（菜单显示时点击其他区域）                     |      |
| tree-hierarchy-state-change | 树形结构展开收起的点击事件                                     |      |
| show-menu                   | 显示菜单事件                                                   |      |
| hide-menu                   | 隐藏菜单事件                                                   |      |
| icon-click                  | icon 图标点击事件                                              |      |
| drillmenu-click             | 下钻按钮点击事件。透视表专有事件                               |      |
| pivot-sort-click            | 透视表中排序图标点击事件。透视表专有事件                       |      |
| legend-item-click           | 图例项点击事件。图例专有事件                                   |      |
| legend-item-hover           | 图例项 hover 事件。图例专有事件                                |      |
| legend-item-unhover         | 图例项 hover 到 unhover 事件。图例专有事件                     |      |
| legend-change               | 颜色图例，尺寸图例，用户操作图例范围后触发该事件。图例专有事件 |      |
| mouseenter-axis             | 鼠标进入到坐标轴上事件。坐标轴专有事件                         |      |
| mouseleave-axis             | 鼠标离开坐标轴事件。坐标轴专有事件                             |      |

## 方法

详细参数见：[Methods](https://visactor.io/vtable/api/Methods)

| 事件名                      | 说明                                                             | 参数                     |
| --------------------------- | ---------------------------------------------------------------- | ------------------------ |
| updateOption                | 更新表格配置项，调用后会自动重绘                                 | options                  |
| updateTheme                 | 更新表格主题，调用后会自动重绘                                   | theme                    |
| updateColumns               | 更新表格的 columns 字段配置信息，调用后会自动重绘。              | columns                  |
| updatePagination            | 更新页码配置信息                                                 | pagination               |
| release                     | 销毁表格实例                                                     |                          |
| selectCell                  | 选中某个单元格                                                   | col, row                 |
| selectCells                 | 选中一个或者多个单元格区域                                       | []                       |
| getCellStyle                | 获取某个单元格的样式                                             | col, row                 |
| getAllCells                 | 获取所有单元格上下文信息                                         | colMaxCount, rowMaxCount |
| getAllBodyCells             | 获取所有 body 单元格上下文信息                                   | colMaxCount, rowMaxCount |
| getAllColumnHeaderCells     | 获取所有列表头单元格上下文信息                                   | colMaxCount, rowMaxCount |
| getAllRowHeaderCells        | 获取所有行表头单元格上下文信息                                   | colMaxCount, rowMaxCount |
| getCellOverflowText         | 获取有省略文字的的单元格文本内容                                 | col, row                 |
| getCellHeaderPaths          | 获取行列表头的路径                                               | col, row                 |
| getCellAddress              | 根据数据和 field 属性字段名称获取 body 中某条数据的行列号        | findTargetRecord, field  |
| getCellAddressByHeaderPaths | 针对透视表格的接口，根据要匹配表头维度路径来获取具体的单元格地址 | dimensionPaths           |
| scrollToCell                | 滚动到具体某个单元格位置                                         | cellAddr                 |
| updateSortState             | 更新排序状态                                                     | sortState, executeSort   |
| updatePivotSortState        | 更新排序状态，PivotTable 专有                                    | pivotSortStateConfig     |
| setDropDownMenuHighlight    | 设置下拉菜单选中状态                                             |                          |
| showTooltip                 | 显示 tooltip 信息提示框                                          | col, row, tooltipOptions |
| updateFilterRules           | 更新数据过滤规则                                                 | filterRules              |
| exportImg                   | 导出表格中当前可视区域的图片                                     |                          |
| exportCellImg               | 导出某个单元格图片                                               | col, row                 |
| exportCellRangeImg          | 导出某一片单元格区域的图片                                       | []                       |
