element tree grid
1.0.0
트리 그리드는 vue 로 element ui를 확장합니다.
<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' |
| 자식번호키 | 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 |
| 모두원격 | 원격에서 모든 데이터를 요청하려면 먼저 prop 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 >
