Vue-Vtable-Grid

• 😊 基于 Vue 2.0 开发；
• 👍 使用 VTable

安装

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

全局使用

// 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),
});

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

局部引入

基本用法

<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 | Array | — | — | | columns | 表格列，，详见columns | Array | — | — | | options | 表格配置项，详见options | Object | — | — |

事件

详细参数见：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

| 事件名 | 说明 | 参数 | | --------------------------- | ---------------------------------------------------------------- | ------------------------ | | 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 | 导出某一片单元格区域的图片 | [] |