Excel-подобные компоненты на основе vue+canvas

внешний интерфейс Vue.js Canvas

vue-grid-canvas

компонент vue, табличный компонент, основанный на vue, в основном решает проблему производительности рендеринга таблиц с большими объемами данных, использует холст для рисования таблиц и поддерживает пакетный выбор, подобный excel, копирование и вставку, редактирование в реальном времени и другие функции, и все еще усердно работает над улучшением. Я надеюсь, что с вашей поддержкой ваша звезда станет моей мотивацией. Если у вас есть какие-либо предложения или помощь, вы можете отправить по электронной почте: zhaoyh294@163.com.

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>

##Формула (начинается с '=', поддерживает только заполнение поля ввода на панели инструментов):

Example:

=include(1-3,5)=>h*1.1 & include(4,6--)=>i*1.2
  • 1. Поддержка объединения нескольких формул ('&')
  • 2. Пользовательский выбор области поддержки («область => формула»)
  • 3. Региональный выбор поддерживает включение и исключение (включение может быть опущено, исключение может быть сокращено как '!')
  • 4. Содержимое в скобках выбора области, «-» — интервал, а «,» — объединение
  • 5. Выберите область с одним столбцом, чтобы автоматически отобразить кнопку пакетного редактирования, и нажмите, чтобы автоматически заполнить формулу.

Description

  • 1. Реализовано через холст, который может обрабатывать данные уровня 10 000
  • 2, аналогично excel, выделяйте ячейки и редактируйте их в режиме реального времени
  • 3, копирование и вставка, пакетная поддержка, копирование из excel, копирование в excel
  • 4. Отменить/перейти
  • 5, флажок, выберите все функции, переключаемые
  • 6. Фиксированная колонка (в настоящее время поддерживает только фиксированную правую сторону)
  • 7, удалить ячейки, пакет поддержки
  • 7. Поддержка пересчета рендеринга текста (ячейки с помощью расчета не поддерживают редактирование в реальном времени)
  • 8. Поддержка основного отображения кнопок и событий кликов
  • 9. Функция скрытой колонки, переключаемая
  • 10. Расчет базовой формулы

##СДЕЛАТЬ:

  • 1. Поскольку использование холста не поддерживает функцию поиска браузера, функция поиска формы будет добавлена ​​позже.
  • 2, перетаскивание строк и столбцов
  • 3. Расчет базовой формулы (часть)

Запустите проект DEMO


npm install

npm run dev
Категории