el table plus

エルテーブルプラス

el-table に基づいて構成可能なコンポーネント

背景: 要素 el-table を使用する場合、記述しなければならないテンプレート コードが多すぎるため、ページ上の HTML コードが多すぎます。アプリケーション層から要素コンポーネントライブラリを見ると、APIの設計は非常に柔軟ですが、使用するのは非常に面倒です。したがって、関連する構成を簡素化するために el-table をパッケージ化する必要があります。

アプリケーション層の API 設計は比較的良好です。antd-design-vue テーブルを推奨します。el-table-plus API 設計は、引き続き element-ui テーブル コンポーネントを参照します。同時に、すべての属性/イベントは元の要素テーブル コンポーネントをサポートします。これは元の API を破壊しません (侵入なし)。また、カスタムを実現するための 3 つの方法で列データのレンダリングをカスタマイズするスロット/jsx/h 関数もサポートします。ビジネス ロジックのレンダリングも統合されています。一般的に使用されるページネーション コンポーネントと拡張 API により、一般的なビジネスを簡単に処理できます。

オンラインケース

https://lq782655835.github.io/el-table-plus

特徴

1. シンプルな使用法。サポートに必要な属性はデータと列の 2 つだけです。
2. 完全な継承、要素 UI の完全な属性/イベントの継承
3. 拡張性が高く、slot/jsx/h 関数をサポートし、列データのレンダリングを 3 つの方法でカスタマイズできます。
4. さらに便利になった、拡張スクロールイベント、ページネーションコンポーネント、FNクイックフォーマット

設置と導入

インストール

yarn add @springleo/el-table-plus

導入

このコンポーネントは element-ui の el-table コンポーネントに依存するため、自分で導入する必要があります。

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus ) 

基本的な使い方

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template > 

API

el-table-plus 属性

el-table のすべてのオリジナル属性をサポートし、次の API を拡張します。

パラメータ	タイプ	デフォルト値	説明する
読み込み中	ブール値	間違い	アニメーションの読み込み
データ	配列	[]	リストデータ
列	配列	[]	列項目構成リスト。詳細については、以下の列属性を参照してください。
ページネーション	物体		ページめくり設定。デフォルトでは設定されていないため、ページめくりは表示されません。関連する API は el-pagination にあります。
合計	番号	0	ページめくりの総数

エルテーブルプラスイベント

el-table 上のすべてのオリジナル イベントをサポートし、次の API を拡張します。

イベント名	説明する	説明
スクロール	テーブルスクロールバーイベント	e
ページ変更	ページめくり変更イベント	{ ページサイズ、現在のページ }

列属性

すべての元の属性と el-table-column のスコープ付きスロットをサポートし、次の API を拡張します。

属性	タイプ	デフォルト	説明
ラベル	弦		列名
小道具	弦		列データフィールドは、user.email.prefix などのマルチレベルオブジェクトのネストをサポートします。
隠れた	ブール値		この列を非表示にするかどうか。この提案は、応答性の高い表示と非表示を可能にする計算された提案です。
カスタムレンダリング	関数		カスタム列データのレンダリング。関数パラメータ (値、行、列、$index、h)、 jsx および h 関数をサポート
カスタムタイトル	関数		カスタム列ヘッダーのレンダリング。関数パラメータ (column、$index、h)、 jsx および h 関数をサポート
スコープ付きスロット	物体		スロット モードを使用してレンダリングをカスタマイズし、customRender/customTitle 関数を置き換えます。例: {customRender: 'slotName1'、customTitle: 'slotName2' }

Vueプラグインシリーズ

プラグイン	状態	説明
@springleo/el-dialog-helper		Vue でダイアログを約束します!
@springleo/エルテーブルプラス		el-table に基づいて構成可能なコンポーネント
@springleo/エルフォームプラス		要素UIフォームに基づくスキーマフォーム
@springleo/仮想スクロールテーブル		無限ドロップダウン仮想スクロール テーブル コンポーネント

ライセンス

マサチューセッツ工科大学