vue willtable

vue-willtable editable table component

English document

Editable table component suitable for Vue, supports multiple shortcut key operations, and simulates Excel operating experience

Demo here: https://demo.willwuwei.com/willtable/

A multi-person real-time sharing and editing form system implemented based on this component:

Visit URL

Front-end project address

Backend project address

screenshot

characteristic

• Table width adjustment
• Table columns fixed
• Data filtering and sorting
• Line multiple selection
• Batch deletion and copy-paste
• Copy and paste with Excel
• Data drop-down copy
• The table can automatically scroll when pulling down to copy or multi-select cells.
• Get changed data rows
• Verification of multiple data types
• Support custom rule data verification
• Get data rows with illegal verification
• Support undo and redo
• Each cell style and class name can be customized
• Use local rendering to support the display of larger amounts of data

Install

 npm install vue-willtable --save

mount

Mounted globally

 import Vue from 'vue'
import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

Vue . component ( 'VueWilltable' , VueWilltable )

mounted on component

 import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

export default {
  components : {
    VueWilltable
  }
} 

Usage examples

< 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 >

data

this.$refs.willtable calls the setData method to update the entire table data and reset historical data records.

this.$refs.willtable calls the getData method to obtain the entire table data.

v-model binds values

property

parameter	illustrate	type	Optional value	default value
columns	Configuration description of table columns	Array	——	[]
maxHeight	table maximum height	string/number	——	——
rowHeight	height of each row	string/number	——	——
disabled	Editing prohibited	Boolean	——	true
showIcon	Show header type icon	Boolean	——	false
cellStyle	Callback method of cell style	Function({row, column, rowIndex, columnIndex})	——	——
cellClassName	The callback method of the cell's className	Function({row, column, rowIndex, columnIndex})	——	——
disabledCell	Disable cells	Function({row, column, rowIndex, columnIndex}) => Boolean	——	() => false
showAddRow	Show add row function	Boolean	——	false
addRowAndCopy	Copy the previous row of data when adding a row	Boolean	——	false

event

event name	illustrate	callback parameters
selection-change	This event is triggered when the selection changes	selection

method

method name	illustrate	parameter
getData	Used to obtain data and return the current table data	——
setData	Used to set data and reset history	data
getChangeData	Get changed data rows	——
getErrorRows	Get data and index with verification errors	——
addItem	Add a row of data at the bottom	item
addRow	Add row	rowIndex, copyRow, customData
removeItems	For batch deletion, the parameter key is the unique identification attribute of each row such as id, and values ​​is an array of identification attributes.	key, value
setCellData	Set cell data	rowIndex, columnIndex, value
fullscreen	Full screen display	——
exitFullscreen	Exit full screen	——

Column properties

parameter	illustrate	type	Optional value	default value
key	The field name corresponding to the column content	String	——	——
title	Column header display text	String	——	——
width	column width	String/Number	——	——
type	Column type	String	selection/number/date/select/month	——
format	Thousand sign format (for number type)	Boolean	——	true
options	select drop-down option	Array	{ value: 'value', label: 'display text' }	——
fixed	Is it fixed on the left side?	Boolean	——	false
action	Whether to enable filtering and sorting	Boolean	——	false
disabled	Whether to prohibit editing	Boolean	——	false
noVerify	Whether to disable verification	Boolean	——	false
validate	Custom verification	Function(value)	——	——
customInput	custom input	Function({ row, column, rowIndex, columnIndex, value })	——	——

shortcut key

shortcut key	illustrate
Arrow keys	Move edit box
Ctrl + C	Paste
Ctrl+V	copy
Ctrl+A	Select all cells
Ctrl+Z	Cancel
Ctrl+Y	redo
Enter	Cell editing/Complete cell editing
Delete, Backspace	delete

author

WillWu