drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Table tree support sort

Browse source
This commit is contained in:
梁灏 2020-01-08 21:13:57 +08:00
parent 3c9452ef2a
commit a5acce4b81
3 changed files with 61 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
examples/routers/table.vue
View file

@ -47,8 +47,7 @@
}, },
{ {
title: 'Age', title: 'Age',
// key: 'age', key: 'age',
slot: 'age',
sortable: true sortable: true
}, },
{ {
@ -68,6 +67,7 @@
address: 'New York No. 1 Lake Park', address: 'New York No. 1 Lake Park',
date: '2016-10-03', date: '2016-10-03',
_disabled: true, _disabled: true,
level: 0
}, },
{ {
id: '101', id: '101',
@ -77,58 +77,66 @@
date: '2016-10-01', date: '2016-10-01',
_showChildren: true, _showChildren: true,
_disabled: false, _disabled: false,
level: 0,
children: [ children: [
{ {
id: '10100', id: '10100',
name: '张三', name: '张三',
age: 18, age: 235,
address: '发动机莲富大厦放假了开始的', address: '发动机莲富大厦放假了开始的',
date: '2016-10-01' date: '2016-10-01',
level: 1
}, },
{ {
id: '10101', id: '10101',
name: '李四', name: '李四',
age: 19, age: 129,
address: '风刀霜剑分离的思路开发', address: '风刀霜剑分离的思路开发',
date: '2016-10-02' date: '2016-10-02',
level: 1
}, },
{ {
id: '10102', id: '10102',
name: '王五', name: '王五',
age: 20, age: 290,
address: '分离的付款就说个就是范德萨发生', address: '分离的付款就说个就是范德萨发生',
date: '2016-10-03', date: '2016-10-03',
_showChildren: true, _showChildren: true,
level: 1,
children: [ children: [
{ {
id: '10102100', id: '10102100',
name: '赵六', name: '赵六',
age: 21, age: 211,
address: '梵蒂冈人太热疼我', address: '梵蒂冈人太热疼我',
date: '2016-10-05' date: '2016-10-05',
level: 2
}, },
{ {
id: '10102101', id: '10102101',
name: '丁八', name: '丁八',
age: 22, age: 272,
address: '法第三方的范德萨范德萨发送到', address: '法第三方的范德萨范德萨发送到',
date: '2016-10-06', date: '2016-10-06',
_showChildren: true, _showChildren: true,
level: 2,
children: [ children: [
{ {
id: '10102101100', id: '10102101100',
name: '第九', name: '第九',
age: 23, age: 123,
address: '9梵蒂冈人太热疼我', address: '9梵蒂冈人太热疼我',
date: '2016-10-07', date: '2016-10-07',
_disabled: true _disabled: true,
level: 3
}, },
{ {
id: '10102101101', id: '10102101101',
name: '第十', name: '第十',
age: 24, age: 254,
address: '10法第三方的范德萨范德萨发送到', address: '10法第三方的范德萨范德萨发送到',
date: '2016-10-08' date: '2016-10-08',
level: 3
}, },
] ]
}, },
@ -143,6 +151,7 @@
address: 'Sydney No. 1 Lake Park', address: 'Sydney No. 1 Lake Park',
date: '2016-10-02', date: '2016-10-02',
_disabled: false, _disabled: false,
level: 0
}, },
{ {
id: '103', id: '103',
@ -151,6 +160,7 @@
address: 'Ottawa No. 2 Lake Park', address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04', date: '2016-10-04',
_disabled: true, _disabled: true,
level: 0
} }
], ],
columns5: [ columns5: [
@ -165,7 +175,8 @@
}, },
{ {
title: 'Age', title: 'Age',
key: 'age' key: 'age',
sortable: true
}, },
{ {
title: 'Address', title: 'Address',

32
src/components/table/table-body.vue
View file

@ -171,6 +171,34 @@
} }
return status; return status;
}, },
getLevel (rowKey) {
let level;
for (let i = 0; i < this.data.length; i++) {
const row = this.data[i];
if (row[this.rowKey] === rowKey) {
level = 0;
break;
} else if (row.children && row.children.length) {
level = this.getChildLevel(row, rowKey, 1);
}
}
return level;
},
getChildLevel (data, rowKey, level) {
let newLevel;
if (data.children && data.children.length) {
for (let i = 0; i < data.children.length; i++) {
const row = data.children[i];
if (row[this.rowKey] === rowKey) {
newLevel = level;
break;
} else if (row.children && row.children.length) {
newLevel = this.getChildLevel(row, rowKey, level + 1);
}
}
}
return newLevel;
},
getChildNode (h, data, nodes, level = 1) { getChildNode (h, data, nodes, level = 1) {
if (data.children && data.children.length) { if (data.children && data.children.length) {
data.children.forEach((row, index) => { data.children.forEach((row, index) => {
@ -190,7 +218,7 @@
disabled: this.rowStatusByRowKey('_isDisabled', row._rowKey), disabled: this.rowStatusByRowKey('_isDisabled', row._rowKey),
expanded: this.rowStatusByRowKey('_isExpanded', row._rowKey), expanded: this.rowStatusByRowKey('_isExpanded', row._rowKey),
treeNode: true, treeNode: true,
treeLevel: level treeLevel: this.getLevel(row._rowKey)
}, },
key: column._columnKey, key: column._columnKey,
}); });
@ -228,7 +256,7 @@
if (row.children && row.children.length) { if (row.children && row.children.length) {
level++; level++;
this.getChildNode(h, row, nodes, level, level); this.getChildNode(h, row, nodes, level);
} }
}); });
return nodes; return nodes;

5
src/components/table/table.vue
View file

@ -998,6 +998,11 @@
} }
} }
}); });
for (let i = 0; i < data.length; i++) {
if (data[i].children && data[i].children.length) {
data[i].children = this.sortData(data[i].children, type, index);
}
}
return data; return data;
}, },
handleSort (_index, type) { handleSort (_index, type) {