vue willtable

vue-willtable可編輯的表格組件

English document

適用於Vue的可編輯的表格元件，支援多種快速鍵操作，模擬Excel的操作體驗

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

基於此元件實現的多人即時分享編輯表格系統:

造訪網址

前端專案地址

後端項目地址

截圖

特性

• 表格寬度調整
• 表格列固定
• 資料篩選與排序
• 行多選
• 批量刪除與複製貼上
• 可與Excel互相複製貼上
• 資料下拉複製
• 下拉複製與多選儲存格時候表格可自動捲動
• 取得改變的資料行
• 多種資料類型校驗
• 支援自訂規則資料校驗
• 取得校驗非法的資料行
• 支援撤銷與重做
• 可自訂每個儲存格樣式與類別名
• 使用局部渲染，支援更大量資料的展示

安裝

 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進行值的綁定

屬性

參數	說明	類型	可選值	預設值
columns	表格列的配置描述	Array	——	[]
maxHeight	表格最大高度	string / number	——	——
rowHeight	每行高度	string / number	——	——
disabled	禁止編輯	Boolean	——	true
showIcon	顯示表頭類型圖標	Boolean	——	false
cellStyle	單元格的style 的回呼方法	Function({row, column, rowIndex, columnIndex})	——	——
cellClassName	單元格的className 的回呼方法	Function({row, column, rowIndex, columnIndex})	——	——
disabledCell	禁用單元格	Function({row, column, rowIndex, columnIndex}) => Boolean	——	() => false
showAddRow	顯示新增行功能	Boolean	——	false
addRowAndCopy	新增行時複製上一行數據	Boolean	——	false

事件

事件名稱	說明	回呼參數
selection-change	當選擇項發生變化時會觸發該事件	selection

方法

方法名	說明	參數
getData	用來取得數據，返回目前表格數據	——
setData	用來設定數據，並重置歷史記錄	data
getChangeData	取得變化的資料行	——
getErrorRows	取得校驗錯誤的資料和索引	——
addItem	底部新增一行數據	item
addRow	新增行	rowIndex, copyRow, customData
removeItems	批量刪除，參數key為每行的唯一標識屬性如id，values為該標識屬性的數組	key, values
setCellData	設定單元格數據	rowIndex, columnIndex, value
fullscreen	全螢幕展示	——
exitFullscreen	退出全螢幕	——

列屬性

參數	說明	類型	可選值	預設值
key	對應列內容的欄位名	String	——	——
title	列頭顯示文字	String	——	——
width	列寬度	String / Number	——	——
type	列類型	String	selection/number/date/select/month	——
format	千分號格式（用於number型別）	Boolean	——	true
options	select下拉選項	Array	{ 值: '值', label: '顯示文字' }	——
fixed	是否固定在左側	Boolean	——	false
action	是否啟用篩選和排序	Boolean	——	false
disabled	是否禁止編輯	Boolean	——	false
noVerify	是否禁用校驗	Boolean	——	false
validate	自訂校驗	Function(value)	——	——
customInput	自訂輸入	Function({ row, column, rowIndex, columnIndex, value })	——	——

快速鍵

快速鍵	說明
方向鍵	移動編輯框
Ctrl + C	貼上
Ctrl + V	複製
Ctrl + A	單元格全選
Ctrl + Z	撤銷
Ctrl + Y	重做
Enter	單元格編輯/完成單元格編輯
Delete、Backspace	刪除

作者

WillWu