How to use excel-like components in vue+canvas

a vue component, a table component based on Vue, mainly solves the problem of table rendering performance for large amounts of data. It uses canvas to draw tables and supports excel-like batch selection, copy-paste deletion, real-time editing and other functions. This article It mainly introduces the excel-like component based on vue canvas. Friends who need it can refer to

a vue component. The table component based on vue mainly solves the problem of table rendering performance of large amounts of data and uses canvas to draw tables. It also supports excel-like batch selection, copy-paste deletion, real-time editing and other functions.

vue-grid-canvas

Install

NPM / Yarn

Install the package:

npm install vue-canvas-grid --save
Then import it in your project

import Vue from 'vue'
import Grid from 'vue-canvas-grid'

Vue.component('grid', Grid)

Usage

Simply use it like so:

<grid :grid-data="data" :columns="columns" showCheckbox columnSet></grid>

Description

1, implemented through canvas, can handle tens of thousands of data
2, similar to excel, select cells and edit them in real time
3, copy Paste, support batch, copy from excel, copy to excel
4, undo/forward
5, checkbox, select all function, switchable
6, fixed columns (currently only supported Fixed to the right)
7, delete cells, support batch
7, support recalculation and rendering of text (cells that pass calculation do not support real-time editing)
8, support basic button display and click events
9. The hidden column function can be switched on or off.
##TODO:

1. Since the canvas does not support the browser's search function, the search function of the table will be added in the future.
2, rows and columns Drag
3, basic formula calculation

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use vue-ssr to implement server-side rendering

How to use history to control routing in react-router ( Detailed tutorial)

How to use jqprint to print page content

Use js to implement WeChat to evoke Alipay to receive red envelopes (detailed tutorial)

How to implement static web page modularization using Gulp? How to do it specifically?

About how Wangwang online customer service implements

How to implement multiple inheritance in JavaScript

How Implement webpack multi-entry file packaging configuration

How to implement web mouse effects (detailed tutorial)

How to implement a shopping mall using vue

How to use Vue jquery to shrink the text of specified columns of the table

Use ui-route to implement multi-layer nested routing in AngularJS (detailed tutorial)

The above is the detailed content of How to use excel-like components in vue+canvas. For more information, please follow other related articles on the PHP Chinese website!