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	导出某一片单元格区域的图片	[]