遇到任何组件和文档有关问题，请提交 issue

如果我看的更远，那是因为我站在巨人的肩膀上。

vue-fantable

English | 中文

介绍

如果你的项目使用 vue2，建议使用 vue-easytable

本项目由 vue-easytable 更新而来，支持 Vue3，使用 ESM（建议 node V18+）体积更小，像使用 vue-easytable 一样，使用 vue-fantable 吧。

作者维护该应用，作为低代码平台的依赖，而当前工作重心并不在该项目。仅当有有重大问题时，我会修复这些问题。

特点

• 采用虚拟滚动技术，支持 30 万行数据展示和实时编辑
• 永久开源免费。当然你也可以选择捐赠，保证项目长期维护和功能加速开发

API & 文档

组件使用方式和 vue-easytable 尽可能保持一致。

• vue-fantable 文档
• CHANGE_LOG

安装

确保 Vue 版本至少为 3.2

npm install vue-fantable
# or
yarn add vue-fantable

使用

讲一下内容添加到 main.js:

1import { createApp } from "vue";
2import "vue-fantable/libs/theme-default.css";
3import App from './app.vue'
4import VueFantable from "vue-fantable";
5const app = createApp(App)
6app.use(VueFantable);
7
8app.mounted('#app')

示例 1

1<template>
2  <fan-table :columns="columns" :table-data="tableData" :max-height="400"/>
3</template>
4
5<script >
6  export default {
7    data() {
8      return {
9        columns: [
10          { field: "name", key: "a", title: "Name", align: "center" },
11          { field: "date", key: "b", title: "Date", align: "left" },
12          { field: "hobby", key: "c", title: "Hobby", align: "right" },
13          { field: "address", key: "d", title: "Address" },
14        ],
15        tableData: [
16          {
17            name: "John",
18            date: "1900-05-20",
19            hobby: "coding and coding repeat",
20            address: "No.1 Century Avenue, Shanghai",
21          },
22          {
23            name: "Dickerson",
24            date: "1910-06-20",
25            hobby: "coding and coding repeat",
26            address: "No.1 Century Avenue, Beijing",
27          },
28          {
29            name: "Larsen",
30            date: "2000-07-20",
31            hobby: "coding and coding repeat",
32            address: "No.1 Century Avenue, Chongqing",
33          },
34          {
35            name: "Geneva",
36            date: "2010-08-20",
37            hobby: "coding and coding repeat",
38            address: "No.1 Century Avenue, Xiamen",
39          },
40          {
41            name: "Jami",
42            date: "2020-09-20",
43            hobby: "coding and coding repeat",
44            address: "No.1 Century Avenue, Shenzhen",
45          },
46        ],
47      };
48    },
49  };
50</script>

示例 2

1<template>
2  <div class="spreadsheet">
3    <fan-table style="word-break: break-word" fixed-header :scroll-width="0" :max-height="500" border-y :columns="columns"
4      :table-data="tableData" row-key-field-name="rowKey" :virtual-scroll-option="virtualScrollOption"
5      :cell-autofill-option="cellAutofillOption" :edit-option="editOption"
6      :contextmenu-body-option="contextmenuBodyOption" :contextmenu-header-option="contextmenuHeaderOption"
7      :row-style-option="rowStyleOption" :column-width-resize-option="columnWidthResizeOption" />
8  </div>
9</template>
10
11<script lang="jsx">
12
13const COLUMN_KEYS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']
14export default {
15  name: 'SpreadSheet',
16  data() {
17    return {
18      // start row index
19      startRowIndex: 0,
20      columnWidthResizeOption: {
21        enable: true,
22      },
23      virtualScrollOption: {
24        // 是否开启
25        enable: true,
26        scrolling: this.scrolling,
27      },
28      cellAutofillOption: {
29        directionX: true,
30        directionY: true,
31        beforeAutofill: ({
32          direction,
33          sourceSelectionRangeIndexes,
34          targetSelectionRangeIndexes,
35          sourceSelectionData,
36          targetSelectionData,
37        }) => { },
38        afterAutofill: ({
39          direction,
40          sourceSelectionRangeIndexes,
41          targetSelectionRangeIndexes,
42          sourceSelectionData,
43          targetSelectionData,
44        }) => { },
45      },
46      // edit option 可控单元格编辑
47      editOption: {
48        beforeCellValueChange: ({ row, column, changeValue }) => { },
49        afterCellValueChange: ({ row, column, changeValue }) => { },
50      },
51      // contextmenu header
52      contextmenuHeaderOption: {
53        //  before contextmenu show. 你可以在这里更改 contextmenu 配置
54        beforeShow: ({
55          isWholeColSelection,
56          selectionRangeKeys,
57          selectionRangeIndexes,
58        }) => {
59          // do something
60        },
61        afterMenuClick: ({
62          type,
63          selectionRangeKeys,
64          selectionRangeIndexes,
65        }) => {
66          // do something
67        },
68        contextmenus: [
69          { type: 'CUT', },
70          { type: 'COPY', },
71          { type: 'SEPARATOR', },
72          { type: 'EMPTY_COLUMN', },
73          { type: 'SEPARATOR', },
74          { type: 'LEFT_FIXED_COLUMN_TO', },
75          { type: 'CANCEL_LEFT_FIXED_COLUMN_TO', },
76          { type: 'RIGHT_FIXED_COLUMN_TO', },
77          { type: 'CANCEL_RIGHT_FIXED_COLUMN_TO', },
78        ],
79      },
80      contextmenuBodyOption: {
81        //  before contextmenu show. 你可以在这里更改 contextmenu 配置
82        beforeShow: ({
83          isWholeRowSelection,
84          selectionRangeKeys,
85          selectionRangeIndexes,
86        }) => {
87          console.log('---contextmenu body beforeShow--')
88          console.log('isWholeRowSelection::', isWholeRowSelection)
89          console.log('selectionRangeKeys::', selectionRangeKeys)
90          console.log(
91            'selectionRangeIndexes::',
92            selectionRangeIndexes,
93          )
94        },
95        afterMenuClick: ({
96          type,
97          selectionRangeKeys,
98          selectionRangeIndexes,
99        }) => {
100          console.log('---contextmenu body afterMenuClick--')
101          console.log('type::', type)
102          console.log('selectionRangeKeys::', selectionRangeKeys)
103          console.log('selectionRangeIndexes::', selectionRangeIndexes)
104        },
105        contextmenus: [
106          { type: 'CUT', },
107          { type: 'COPY', },
108          { type: 'SEPARATOR', },
109          { type: 'INSERT_ROW_ABOVE', },
110          { type: 'INSERT_ROW_BELOW', },
111          { type: 'SEPARATOR', },
112          { type: 'REMOVE_ROW', },
113          { type: 'EMPTY_ROW', },
114          { type: 'EMPTY_CELL', },
115        ],
116      },
117      rowStyleOption: {
118        clickHighlight: false,
119        hoverHighlight: false,
120      },
121      tableData: [],
122    }
123  },
124  computed: {
125    // current local
126    columns() {
127      let columns = [
128        {
129          field: 'index',
130          key: 'index',
131          // is operation column
132          operationColumn: true,
133          title: '',
134          width: 55,
135          fixed: 'left',
136          renderBodyCell: this.renderRowIndex,
137        },
138      ]
139      columns = columns.concat(
140        COLUMN_KEYS.map((keyValue) => {
141          return {
142            title: keyValue,
143            field: keyValue,
144            key: keyValue,
145            width: 90,
146            edit: true,
147          }
148        }),
149      )
150      return columns
151    },
152  },
153  created() {
154    this.initTableData()
155  },
156  methods: {
157    // 渲染 row index
158    renderRowIndex({ row, column, rowIndex }) {
159      return (<span>{rowIndex + this.startRowIndex + 1}</span>)
160    },
161    scrolling({
162      startRowIndex,
163      visibleStartIndex,
164      visibleEndIndex,
165      visibleAboveCount,
166      visibleBelowCount,
167    }) {
168      this.startRowIndex = startRowIndex
169    },
170    initTableData() {
171      const tableData = []
172      for (let i = 0; i < 5000; i++) {
173        const dataItem = {
174          rowKey: i,
175        }
176        COLUMN_KEYS.forEach((keyValue) => {
177          dataItem[keyValue] = ''
178        })
179        if (i === 1 || i === 3) {
180          dataItem.C = 'YOU'
181          dataItem.D = 'CAN'
182          dataItem.E = 'TRY'
183          dataItem.F = 'ENTER'
184          dataItem.G = 'SOME'
185          dataItem.H = 'WORDS'
186          dataItem.I = '!!!'
187        }
188        tableData.push(dataItem)
189      }
190      this.tableData = tableData
191    },
192  },
193}
194</script>
195<style lang="less">
196.spreadsheet {
197  padding: 0 100px;
198  margin: 30px 0;
199}
200</style>

更多功能支持

其它基础组件

• Loading 组件加载状态
• Pagination 分页组件
• Contextmenu 右键菜单组件
• Icon 图标组件
• Locale 国际化组件

Table 组件

• 国际化
• 主题定制 & 内置主题
• 虚拟滚动
• 自定义事件
• 更多用法

如果没有你想要的的功能，请告诉我

支持环境

• 所有现代浏览器

Edge	Firefox	Chrome	Safari	Opera
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

贡献者们

感谢 easytable 原项目工作者们，以及维护者 huangshuwei 🙏，本项目继承自 vue-easytable@2.27.1。

如何贡献

• 点击 :star: 让更多的人了解到我们
• 如果你希望参与贡献，欢迎 Pull Request

License

http://www.opensource.org/licenses/mit-license.php