vue jsx table
1.0.0
ドキュメントの例
このコンポーネントは、実際のビジネスから始まるElement-Tableの2番目の開発に基づいています。一般的な機能は設定によって生成され、マルチレベルのヘッダーはアイテムを拡張してヘッダー関数をカスタマイズします。 。
使用する前に、Element-UIを導入する必要があります
npm i vue - jsx - table
import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'
Vue . use ( vueJsxTable ) <!-- 引入样式 -->
< link
rel = "stylesheet"
href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
/>
< ! -- 引入组件库 -- >
< script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > 列とTabledataオプションのテーブル構成には必要です。
< vue-jsx-table
: columns = "columns"
: tableData = "tableData"
border
@ selection - change = "selectionChange"
: total = "100"
>
< / vue-jsx-table >
data() {
return {
columns : [
{
type : 'selection' ,
fixed : 'left' ,
selectable : this . rowSelectableHandle ,
} ,
{
label : '年龄' ,
prop : 'age' ,
width : 300 ,
sortable : true ,
} ,
{
label : '学校' ,
prop : 'school' ,
width : 200 ,
} ,
{
label : '学费' ,
prop : 'fee' ,
width : 200 ,
} ,
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} ,
] ,
tableData : [ ]
} ;
} ,コロンボンの子供を設定して、パケットヘッダーをレンダリングします。
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , コロンブのレンダリングオプションを設定します
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , [展開]コンテンツを展開する必要があります。
{
type : 'expand' ,
slot : 'expand' ,
} , Solt： ''列構成アイテムの ''を設定するだけで、スロットはスロットの名前です
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , 列構成アイテムのRenderheaderを設定するだけです。 RenderHeaderは、Element-UIのネイティブ構成です（公式レンダリングヘッダー関数は推奨されません。スロットを使用することをお勧めします!!!、コンソールはプロンプト、囧）、スロットを使用することもできます。スロット構成はテンプレート宣言で定義されています
{
label : '自定义表头' ,
prop : 'name' ,
width : 120 ,
sortable : true ,
renderHeader : ( column , scope ) => {
console . log ( 'scope' , scope ) ;
return < span class = "cell-header-red-star" > { column . label } </ span > ;
} ,
} , {
label : '姓名' ,
prop : 'name' ,
slotHeader : 'slotHeader' ,
} ,
<!-- 插槽表头 -->
< template v-slot : slotHeader = "{ column }" >
<!-- {{ scope.column.label }} -->
< span >插槽表头： { { column . label } } </ span >
</ template > < vue-jsx-table
@ page-change = "pageChangeHandle"
: currentPage . sync = "paginationParams.pageNo"
: total = "100"
>
</ vue-jsx-table >
pageChangeHandle ( val ) {
this . paginationParams . pageNo = val . currentPage ;
this . paginationParams . pageSize = val . pageSize ;
} , レンダリング関数を使用して、ソルトスロットを介してコンポーネントをレンダリングすることもできます
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >すべてのテーブル属性はv-bind = "$ attrs"を介して実装され、追加のテーブル属性が追加されます。
| パラメーター | 説明します | タイプ | デフォルト値 |
|---|---|---|---|
| 列 | テーブルの列 | 配列 | [] |
| columnskeyname | 列のキーは、フィルターチェンジイベントを使用する必要がある場合、この属性識別を必要とします。列のスクリーニング条件（テーブルコラム属性） | 弦 | - |
| 整列します | アライメント | 弦 | 左 |
| ショーパジネーション | ページネーションコントロールを示すかどうか | ブール | 真実 |
| CurrentPage | 現在のページネーションコントロールの現在のページ | 番号 | 1 |
| ページサイズ | ページングのページサイズ | 配列 | [10、20、30、50] |
| ページサイズ | ページサイズのページサイズ | 配列 | [] |
| レイアウト | ページング制御のレイアウト | 弦 | 'サイズ、前、ポケットベル、次、合計' |
| 合計 | ページングコントロールの合計 | 番号 | 0 |
| PaginationStyle | ページネーションコントロールのスタイル | 物体 | - |
| showoverflowtooltip | コンテンツが長すぎると、ツールチップが表示されます。 | ブール | 真実 |
| ShowTablesSetting | テーブル設定を表示します | ブール | 間違い |
| Hidecolumns | 列、ラベル名、いくつかの条件に応じて隠されて表示する必要があります | 配列 | [] |
| カスタムクラス | カスタムスタイルのクラス | 配列 | ['vue-jsx-table-wrapper'] |
すべてのテーブルイベントはv-on = "$リスナー"を介して実装され、追加のテーブルイベントが追加されます。
| パラメーター | 説明します | タイプ | デフォルト値 |
|---|---|---|---|
| サイズ - 中国 | Page-Chinese、現在の変化の変更はこのインシデントをトリガーし、ページングの変更を容易にするためにそれを増やします | 関数 | 'function（{pagesize：10、currentPage：1、}）{}' |
| サイズ - 中国 | ページサイズの変更がトリガーされます | - | - |
| 現在の変更 | CurrentPageの変更がトリガーされます | - | - |
| パラメーター | 説明します | タイプ | デフォルト値 |
|---|---|---|---|
| プロポップ | 対応する列コンテンツのフィールド名 | 弦 | - |
| スロット | 列のスロット名（ネストされたフォーム、スロット名を繰り返すことができない場合、スロットスコア（{row、$ index}））に注意してください））））） | 弦 | - |
| ラベル | 表示されたタイトル | 弦 | - |
| 幅 | 対応する列の幅 | 番号 | - |
| showoverflowtooltip | コンテンツが長すぎると、ツールチップが表示されます | ブール | - |
| 修理済み | 列が左または右に固定されているか（真、左、右）、trueは左に固定されていることを示します | 文字列、ブール | - |
| 与える | JSXレンダリング機能 | 関数 | レンダリング（row、列、$ index） |
| タイプ | 選択/インデックス/展開 | 弦 | - |
| Renderheader | トップ、タイトルラベルエリアレンダリングのタイトル | 関数（列、スコープ}）、列は構成アイテム、スコープはネイティブコンポーネントの範囲です。 （この属性はネイティブパラメーターではありません） | - |
| CellRedStar | 赤い星のロゴがヘッドテキストの前で再生されるかどうか | ブール | 間違い |
| ソート可能 | 対応する列をソートできるかどうか、「カスタム」に設定した場合、ユーザーがリモートでソートしたいと考え、テーブルのソート変更イベントを監視する必要があることを意味します | boolean、string（true、false、 'custom'） | 間違い |
| フォーマッタ | コンテンツのフォーマットに使用されます（Element-UIの元の属性） | 関数（row、colorn、cellvalue、index） | - |
| 選択可能 | タイプ=選択の列のみが有効であり、このタイプは関数です。 | 関数（row、index） | - |
| showheadertooltip | マウスが頭に移動してコピーのコピーを表示するかどうか | ブール | - |
| headertooltiptext | コピーライティング情報コンテンツを表示します | 弦 | - |
