vue willtable

vue-willtable 編集可能なテーブルコンポーネント

英語文書

Vue に適した編集可能なテーブル コンポーネント。複数のショートカット キー操作をサポートし、Excel の操作エクスペリエンスをシミュレートします。

デモはこちら: https://demo.willwuwei.com/willtable/

このコンポーネントに基づいて実装された複数人によるリアルタイム共有および編集フォーム システム:

URLにアクセス

フロントエンドプロジェクトのアドレス

バックエンドプロジェクトのアドレス

スクリーンショット

特性

• テーブル幅調整
• テーブルの列が修正されました
• データのフィルタリングと並べ替え
• 行の複数選択
• 一括削除とコピー＆ペースト
• 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バインド値

財産

パラメータ	説明する	タイプ	オプションの値	デフォルト値
列	テーブル列の構成の説明	配列	——	[]
最大高さ	テーブルの最大高さ	文字列/数値	——	——
行の高さ	各行の高さ	文字列/数値	——	——
無効	編集禁止	ブール値	——	真実
アイコンを表示	ヘッダータイプアイコンを表示	ブール値	——	間違い
セルスタイル	セルスタイルのコールバックメソッド	関数({行, 列, 行インデックス, 列インデックス})	——	——
セルクラス名	セルの className のコールバック メソッド	関数({行, 列, 行インデックス, 列インデックス})	——	——
無効化されたセル	セルを無効にする	Function({行, 列, 行インデックス, 列インデックス}) => ブール値	——	() => false
showAddRow	行追加関数を表示	ブール値	——	間違い
行を追加してコピー	行を追加するときに前の行のデータをコピーします	ブール値	——	間違い

イベント

イベント名	説明する	コールバックパラメータ
選択変更	このイベントは、選択が変更されるとトリガーされます	選択

方法

メソッド名	説明する	パラメータ
データの取得	データを取得し、現在のテーブル データを返すために使用されます。	——
セットデータ	データの設定や履歴のリセットに使用します	データ
getChangeData	変更されたデータ行を取得する	——
getErrorRows	検証エラーのあるデータとインデックスを取得する	——
addItem	一番下にデータ行を追加します	アイテム
行を追加	行を追加	rowIndex、copyRow、customData
削除アイテム	一括削除の場合、パラメータのkeyはidなどの各行の一意の識別属性、valuesは識別属性の配列となります。	キー、値
setCellData	セルデータの設定	rowIndex、columnIndex、値
全画面表示	全画面表示	——
終了全画面表示	全画面表示を終了する	——

列のプロパティ

パラメータ	説明する	タイプ	オプションの値	デフォルト値
鍵	列の内容に対応するフィールド名	弦	——	——
タイトル	列ヘッダーの表示テキスト	弦	——	——
幅	列幅	文字列/数値	——	——
タイプ	列の種類	弦	選択/番号/日付/選択/月	——
形式	千の符号形式（数字型の場合）	ブール値	——	真実
オプション	ドロップダウン オプションを選択します	配列	{ 値: '値'、ラベル: '表示テキスト' }	——
修理済み	左側に固定されているのでしょうか？	ブール値	——	間違い
アクション	フィルタリングと並べ替えを有効にするかどうか	ブール値	——	間違い
無効	編集を禁止するかどうか	ブール値	——	間違い
いいえ検証する	検証を無効にするかどうか	ブール値	——	間違い
検証する	カスタム検証	関数(値)	——	——
カスタム入力	カスタム入力	Function({ 行, 列, 行インデックス, 列インデックス, 値 })	——	——

ショートカットキー

ショートカットキー	説明する
矢印キー	編集ボックスを移動する
Ctrl + C	ペースト
Ctrl+V	コピー
Ctrl+A	すべてのセルを選択します
Ctrl+Z	キャンセル
Ctrl+Y	やり直し
入力	セル編集/完全セル編集
削除、バックスペース	消去

著者

ウィルウー