di-at-grid v0.1.6

DiAtGrid

Библиотека электронной таблицы

Лицензионное соглашение

Лицензионное соглашение размещено по адресу http://diatgrid.digitatl.ru в разделе "Лицензирование и цены".

PDF вариант лицензионного соглашения.

Установка

npm install di-at-grid --save

Использование

Разместите следующие компоненты в шаблоне vue

<template>
  <spread-sheet-editing ref="SpreadSheetEditDOM"
                        :cell="editableCell"
                        :cell-type="editableCellType"
                        :cell-element="editableCellElement"
                        :edit-event="editableCellEvent"
                        :is-label="isShowEditableLabel"
                        @editing:accept="acceptEditingCell"
                        @editing:cancel="cancelEditingCell"></spread-sheet-editing>
    <div class="sheets__nav">
      <v-tabs v-model="currentList"
              align-with-title>
        <v-tab v-for="list in lists"
              :key="list.name"
              class="nav-list"
              active-class="nav-list_active">{{ list.title }}</v-tab>
      </v-tabs>
    </div>
    <spread-sheet ref="SpreadSheet"
                  v-bind="spreadSheetProps"
                  :isOuterBorderOff="true"
                  :delta-height-virtual-list="30"
                  :is-show-title="isShowTitle"
                  :is-show-group="isShowGroup"
                  table-layout-padding="0px 4px 4px 4px"
                  @click:cell="evtClickCell"
                  @dblclick:cell="evtDblClickCell"
                  @keydown:cell="evtKeydownCell"
                  @scroll:body="scrollBody"></spread-sheet>
<template>

Импортируйте компоненты и логику взаимодействия на страницу где размещены визуальные компоненты

import SpreadSheet from 'di-at-grid/src/components/SpreadSheet/SpreadSheet.vue';
import SpreadSheetEditing from 'di-at-grid/src/components/SpreadSheetEditing/SpreadSheetEditing.vue';
import SpreadSheetLogic from 'di-at-grid/src/logics/SpreadSheetLogic';

export default {
  componens: {
    SpreadSheet,
    SpreadSheetEditing,
  },
  data() {
    return {
      ...SpreadSheetLogic.data,
    };
  },
  computed: {
    ...SpreadSheetLogic.computed,
  },
  methods: {
    ...SpreadSheetLogic.methods,
  },
};

Документация

DiAtGrid Документация.

Демо

DiAtGrid Демо.

© ООО "Ателье Цифровизации", 2021