element tree grid
1.0.0
ツリーグリッドはelement ui をvueで拡張します
<el-table-column type="selection" fixed></el-table-column>に問題があります
何かアイデアがあれば、ようこそ!!!
デモ
始める
プロジェクトにクローンを作成する
git clone https://github.com/foolishchow/element-tree-grid.git
cd element-tree-grid
npm install # or yarn
npm run devノードで使用する
npm install element-tree-grid --save //common
var ElTreeGrid = require ( 'element-tree-grid' ) ;
Vue . component ( ElTreeGrid . name , ElTreeGrid ) ;使用法
一般的な使用法
< el-table :data =" model.menus " border max-height =" 250 " >
< el-table-tree-column
file-icon =" icon icon-file "
folder-icon =" icon icon-folder "
prop =" label " label =" labelname " width =" 220 " > </ el-table-tree-column >
< el-table-column prop =" description " label =" description " width =" 180 " > </ el-table-column >
</ el-table >リモートから子供を取得する
< div id =" app " style =" padding: 30px; " >
< el-table :data =" model.menus " border max-height =" 400 " >
< el-table-tree-column
:remote =" remote "
file-icon =" icon icon-file "
folder-icon =" icon icon-folder "
prop =" label " label =" MenuName " width =" 320 " > </ el-table-tree-column >
< el-table-column prop =" id " label =" id " width =" 180 " > </ el-table-column >
< el-table-column prop =" description " label =" Description " :show-overflow-tooltip =" true " width =" 180 " > </ el-table-column >
</ el-table >
</ div > new Vue ( {
el : "#app" ,
data : {
model : {
menus : trees
}
} ,
methods : {
remote ( row , callback ) {
// async or sync are both supported
setTimeout ( function ( ) {
callback ( row . children )
} , 500 )
}
}
} )属性
el-table-columnのすべてのプロパティがサポートされています。
| 名前 | 説明 | 価値観 |
|---|---|---|
| 小道具 | el-table-columnと同じ | |
| ラベル | el-table-columnと同じ | |
| 幅 | el-table-columnと同じ | |
| 修理済み | el-table-columnと同じ | |
| サイズ変更可能 | el-table-columnと同じ | |
| フォーマッタ | el-table-columnと同じ | |
| クラス名 | el-table-columnと同じ | |
| ツリーキー | ネストされた解析のキー | タイプ: String 、デフォルト: 'id' |
| 子NumKey | childNum のキー | タイプ: String 、デフォルト: 'child_num' |
| 親キー | parent_id のキー | タイプ: String 、デフォルト: 'parent_id' |
| レベルキー | ノードの深さのキー | タイプ: String 、デフォルト: 'depth' |
| 子キー | ノードの子のキーが配置されました | タイプ: String 、デフォルト: 'children' |
| ファイルアイコン | ファイルアイコンのクラス名 | タイプ: String 、デフォルト: 'el-icon-file' |
| フォルダアイコン | フォルダー アイコン className を開くときは、 folderIcon-openを使用します。 | タイプ: String 、デフォルト: 'el-icon-folder' |
| リモート | 子を取得するリモートメソッド | タイプ: Function 、デフォルト: null |
| すべてリモート | リモートからすべてのデータをリクエストします。最初にプロップremoteを設定する必要があります。デフォルトではリクエストキャッシュを使用します。 | タイプ: Boolean 、デフォルト: false |
| すべて展開 | ロード時にすべてのノードを展開する | タイプ: Boolean 、デフォルト: false |
| 展開キー | キーは、ラインが開始時に開かれるかどうかを示します（一度だけ消費されます） | タイプ: String 、デフォルト: expanded |
| インデントサイズ | インデント番号 ( px単位) | タイプ: Number 、デフォルト: 14 |
例
< el-table-tree-column
file-icon =" icon icon-file "
folder-icon =" icon icon-folder "
prop =" label "
label =" labelname "
width =" 220 " > </ el-table-tree-column > < el-table-tree-column
file-icon =" icon icon-file "
folder-icon =" icon icon-folder "
prop =" label "
label =" labelname "
:formatter =" formatter "
width =" 220 " > </ el-table-tree-column > < el-table-tree-column
file-icon =" icon icon-file "
folder-icon =" icon icon-folder "
prop =" label "
label =" labelname "
width =" 220 " >
< template slot-scope =" scope " >
< span > prefix = > </ span >
< span > {{scope.row.label}} -- {{scope.row.id}} </ span >
< span > < = suffix </ span >
</ template >
</ el-table-tree-column >
