vue+canvas에서 Excel과 유사한 구성 요소를 사용하는 방법

Vue를 기반으로 하는 테이블 컴포넌트인 vue 컴포넌트는 대용량 데이터에 대한 테이블 렌더링 성능 문제를 주로 해결하며, 캔버스를 사용하여 테이블을 그리며, 엑셀과 같은 일괄 선택, 복사-붙여넣기 삭제, 실시간 편집 및 편집 기능을 지원합니다. 다른 기능들 이 글에서는 주로 vue+canvas 기반의 엑셀 같은 컴포넌트를 소개하는데, 필요한 친구들은 주로 대용량 테이블 렌더링 성능 문제를 해결하는 vue 기반의 테이블 컴포넌트인

a vue 컴포넌트를 참고할 수 있습니다. 데이터 수집, 캔버스를 사용하여 테이블 그리기, Excel과 유사한 일괄 선택, 복사 및 붙여넣기 삭제, 실시간 편집 및 기타 기능도 지원합니다.

vue-grid-canvas

install

npm / yarn

inininininininindallestall :

npm 설치 vue-canvas-grid-save
프로젝트에서 가져 오기

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

Vue.comComponent('grid', Grid)

Usage

간단히 다음과 같이 사용하세요:

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

Description

1 , 캔버스를 통해 구현, 수만 개의 데이터 처리 가능
2, Excel과 유사, 셀 선택 및 실시간 편집
3, 복사 및 붙여넣기, 배치 지원, Excel에서 복사, Excel로 복사
4, 실행 취소/전달
5, 체크박스, 모든 기능 선택, 전환 가능
6, 고정 열(현재 오른쪽 고정만 지원)
7, 셀 삭제, 배치 지원
7, 텍스트 재계산 및 렌더링 지원(계산된 셀은 지원하지 않음) 실시간 편집)
8, 기본 버튼 표시 및 클릭 이벤트 지원
9, 열 숨기기 기능, 켜고 끌 수 있음
##TODO:

1, 캔버스 사용은 브라우저의 검색 기능을 지원하지 않으므로, 향후 표 검색 기능이 추가될 예정입니다.
2, 행 및 열 끌기
3, 기본 수식 계산

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

vue-ssr을 사용하여 서버 측 렌더링을 구현하는 방법

히스토리를 사용하여 반응 라우터에서 라우팅을 제어하는 ​​방법(자세한 튜토리얼)

jqprint를 사용하여 페이지 콘텐츠를 인쇄하는 방법

js를 사용하여 WeChat을 구현하여 Alipay를 호출하여 빨간 봉투를 받도록 합니다(자세한 튜토리얼)

Gulp를 사용하여 정적 웹 페이지 모듈화를 구현하는 방법은 구체적으로 어떻게 됩니까?

Wangwang 온라인 고객 서비스 구현 방법에 대해

JavaScript에서 다중 상속 구현 방법

webpack 다중 항목 파일 패키징 구성 구현 방법

웹 페이지 마우스 효과 구현 방법(자세한 튜토리얼) )

vue를 사용하여 쇼핑몰을 구현하는 방법

Vue+jquery를 사용하여 테이블의 특정 열에서 텍스트를 축소하는 방법

ui-route를 사용하여 AngularJS에서 다중 계층 중첩 라우팅 구현( 자세한 튜토리얼)

위 내용은 vue+canvas에서 Excel과 유사한 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!