vue willtable
1.0.0
английский документ
Редактируемый табличный компонент, подходящий для Vue, поддерживает несколько сочетаний клавиш и имитирует работу с Excel.
Демо здесь: https://demo.willwuwei.com/willtable/
Система обмена и редактирования форм для нескольких человек в режиме реального времени, реализованная на основе этого компонента:
URL-адрес посещения
Адрес фронтенд-проекта
Адрес бэкэнд-проекта
npm install vue-willtable --save
import Vue from 'vue'
import VueWilltable from 'vue-willtable'
// require styles
import 'vue-willtable/dist/vue-willtable.min.css'
Vue . component ( 'VueWilltable' , VueWilltable ) import VueWilltable from 'vue-willtable'
// require styles
import 'vue-willtable/dist/vue-willtable.min.css'
export default {
components : {
VueWilltable
}
} < template >
< willtable
ref = " willtable "
:columns = " columns "
v-model = " data "
maxHeight = " 800 " />
</ template >
< script >
export default {
data () {
return {
columns : [
{
type : ' selection ' ,
width : 40 ,
fixed : true ,
},
{
title : '序号' ,
key : ' sid ' ,
fixed : true ,
type : ' number ' ,
width : 100 ,
},
{
title : '姓名' ,
key : ' name ' ,
fixed : true ,
width : 120 ,
},
{
title : '日期' ,
key : ' date ' ,
type : ' date ' ,
width : 100 ,
},
{
title : '工作岗位' ,
key : ' email ' ,
width : 300 ,
type : ' select ' ,
options : [
{
value : ' Web前端开发' ,
label : ' Web前端开发' ,
},
{
value : ' Java开发' ,
label : ' Java开发' ,
},
{
value : ' Python开发' ,
label : ' Python开发' ,
},
{
value : ' Php开发' ,
label : ' Php开发' ,
},
],
},
{
title : '月份' ,
key : ' month ' ,
type : ' month ' ,
width : 100 ,
},
{
title : '地址' ,
key : ' address ' ,
width : 200 ,
},
{
title : '标题' ,
key : ' title ' ,
width : 300 ,
},
{
title : '内容' ,
key : ' paragraph ' ,
width : 300 ,
},
{
title : '链接' ,
key : ' url ' ,
width : 200 ,
},
{
title : ' ip ' ,
key : ' ip ' ,
width : 200 ,
validate : ( value ) => {
const pattern = / ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )( . ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )) {3} / g ;
return pattern . test (value);
},
},
{
title : '总金额' ,
key : ' sum ' ,
width : 200 ,
},
{
title : ' ID ' ,
key : ' id ' ,
width : 200 ,
},
{
title : '色值' ,
key : ' color ' ,
width : 200 ,
},
],
data : [],
},
},
mounted () {
this . getData ();
},
methods : {
getData () {
const data = [];
this . $refs . willtable . setData (data);
},
},
};
</ script >this.$refs.willtable вызывает метод setData для обновления всех данных таблицы и сброса записей исторических данных.
this.$refs.willtable вызывает метод getData для получения всех данных таблицы.
v-model связывает значения
| параметр | иллюстрировать | тип | Необязательное значение | значение по умолчанию |
|---|---|---|---|---|
| столбцы | Описание конфигурации столбцов таблицы | Множество | —— | [] |
| максимальная высота | максимальная высота стола | строка/число | —— | —— |
| строкаВысота | высота каждого ряда | строка/число | —— | —— |
| неполноценный | Редактирование запрещено | логическое значение | —— | истинный |
| шоуикона | Показать значок типа заголовка | логическое значение | —— | ЛОЖЬ |
| ячейкастиль | Метод обратного вызова стиля ячейки | Функция({строка, столбец, rowIndex, columnsIndex}) | —— | —— |
| имя_ячейкиКласса | Метод обратного вызова className ячейки | Функция({строка, столбец, rowIndex, columnsIndex}) | —— | —— |
| отключенная ячейка | Отключить ячейки | Функция({строка, столбец, rowIndex, columnsIndex}) => Boolean | —— | () => ложь |
| показатьAddRow | Показать функцию добавления строки | логическое значение | —— | ЛОЖЬ |
| добавитьстрокуикопировать | Скопируйте предыдущую строку данных при добавлении строки | логическое значение | —— | ЛОЖЬ |
| название события | иллюстрировать | параметры обратного вызова |
|---|---|---|
| выбор-изменение | Это событие срабатывает при изменении выбора | выбор |
| имя метода | иллюстрировать | параметр |
|---|---|---|
| получить данные | Используется для получения данных и возврата текущих данных таблицы. | —— |
| setData | Используется для установки данных и сброса истории. | данные |
| getChangeData | Получить измененные строки данных | —— |
| getErrorRows | Получить данные и индекс с ошибками проверки | —— |
| добавитьItem | Добавьте строку данных внизу | элемент |
| добавитьстроку | Добавить строку | rowIndex, copyRow, customData |
| удалитьItems | Для пакетного удаления ключ параметра — это уникальный атрибут идентификации каждой строки, например id, а значения — это массив атрибутов идентификации. | ключ, значение |
| setCellData | Установить данные ячейки | индекс строки, индекс столбца, значение |
| полноэкранный | Полноэкранный режим | —— |
| выходПолноэкранный режим | Выйти из полноэкранного режима | —— |
| параметр | иллюстрировать | тип | Необязательное значение | значение по умолчанию |
|---|---|---|---|---|
| ключ | Имя поля, соответствующее содержимому столбца. | Нить | —— | —— |
| заголовок | Текст отображения заголовка столбца | Нить | —— | —— |
| ширина | ширина столбца | Строка/номер | —— | —— |
| тип | Тип столбца | Нить | выбор/номер/дата/выбрать/месяц | —— |
| формат | Формат знака тысячи (для типа номера) | логическое значение | —— | истинный |
| параметры | выберите раскрывающийся список | Множество | { значение: 'значение', метка: 'отображаемый текст' } | —— |
| зафиксированный | Фиксировано ли это с левой стороны? | логическое значение | —— | ЛОЖЬ |
| действие | Включить ли фильтрацию и сортировку | логическое значение | —— | ЛОЖЬ |
| неполноценный | Запретить ли редактирование | логическое значение | —— | ЛОЖЬ |
| noVerify | Отключить ли проверку | логическое значение | —— | ЛОЖЬ |
| подтвердить | Пользовательская проверка | Функция (значение) | —— | —— |
| CustomInput | пользовательский ввод | Функция({строка, столбец,rowIndex,columnIndex,значение}) | —— | —— |
| клавиша быстрого доступа | иллюстрировать |
|---|---|
| Клавиши со стрелками | Переместить поле редактирования |
| Ctrl + С | Вставить |
| Ctrl+V | копировать |
| Ctrl+А | Выбрать все ячейки |
| Ctrl+Z | Отмена |
| Ctrl+Y | переделывать |
| Входить | Редактирование ячеек/Полное редактирование ячеек |
| Удалить, Backspace | удалить |
УиллВу
