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

update Table tree

Browse source
This commit is contained in:
梁灏 2020-01-06 11:17:09 +08:00
parent 6885f5ec49
commit 1e2341aa5d
4 changed files with 44 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
examples/routers/table.vue
View file

@ -1,6 +1,10 @@
<template> <template>
<div style="margin: 100px;"> <div style="margin: 100px;">
<Table disabled-hover border ref="selection" :columns="columns4" :data="data1" row-key></Table> <Table border ref="selection" :columns="columns4" :data="data1" row-key="id">
<template slot-scope="{ row }" slot="age">
<strong>{{row.age}}</strong>
</template>
</Table>
<Button @click="handleSelectAll(true)">Set all selected</Button> <Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button> <Button @click="handleSelectAll(false)">Cancel all selected</Button>
</div> </div>
@ -22,7 +26,8 @@
}, },
{ {
title: 'Age', title: 'Age',
key: 'age' // key: 'age',
slot: 'age'
}, },
{ {
title: 'Date', title: 'Date',
@ -35,55 +40,66 @@
], ],
data1: [ data1: [
{ {
id: '100',
name: 'John Brown', name: 'John Brown',
age: 18, age: 18,
address: 'New York No. 1 Lake Park', address: 'New York No. 1 Lake Park',
date: '2016-10-03' date: '2016-10-03'
}, },
{ {
id: '101',
name: 'Jim Green', name: 'Jim Green',
age: 24, age: 24,
address: 'London No. 1 Lake Park', address: 'London No. 1 Lake Park',
date: '2016-10-01', date: '2016-10-01',
_showChildren: false, _showChildren: true,
children: [ children: [
{ {
id: '10100',
name: '张三', name: '张三',
age: 18, age: 18,
address: '发动机莲富大厦放假了开始的', address: '发动机莲富大厦放假了开始的',
date: '2016-10-01' date: '2016-10-01'
}, },
{ {
id: '10101',
name: '李四', name: '李四',
age: 19, age: 19,
address: '风刀霜剑分离的思路开发', address: '风刀霜剑分离的思路开发',
date: '2016-10-02' date: '2016-10-02'
}, },
{ {
id: '10102',
name: '王五', name: '王五',
age: 20, age: 20,
address: '分离的付款就说个就是范德萨发生', address: '分离的付款就说个就是范德萨发生',
date: '2016-10-03', date: '2016-10-03',
_showChildren: true,
children: [ children: [
{ {
id: '10102100',
name: '赵六', name: '赵六',
age: 21, age: 21,
address: '梵蒂冈人太热疼我', address: '梵蒂冈人太热疼我',
date: '2016-10-05' date: '2016-10-05'
}, },
{ {
id: '10102101',
name: '丁八', name: '丁八',
age: 22, age: 22,
address: '法第三方的范德萨范德萨发送到', address: '法第三方的范德萨范德萨发送到',
date: '2016-10-06', date: '2016-10-06',
_showChildren: true,
children: [ children: [
{ {
id: '10102101100',
name: '第九', name: '第九',
age: 23, age: 23,
address: '9梵蒂冈人太热疼我', address: '9梵蒂冈人太热疼我',
date: '2016-10-07' date: '2016-10-07'
}, },
{ {
id: '10102101101',
name: '第十', name: '第十',
age: 24, age: 24,
address: '10法第三方的范德萨范德萨发送到', address: '10法第三方的范德萨范德萨发送到',
@ -96,12 +112,14 @@
] ]
}, },
{ {
id: '102',
name: 'Joe Black', name: 'Joe Black',
age: 30, age: 30,
address: 'Sydney No. 1 Lake Park', address: 'Sydney No. 1 Lake Park',
date: '2016-10-02' date: '2016-10-02'
}, },
{ {
id: '103',
name: 'Jon Snow', name: 'Jon Snow',
age: 26, age: 26,
address: 'Ottawa No. 2 Lake Park', address: 'Ottawa No. 2 Lake Park',

6
src/components/table/cell.vue
View file

@ -6,7 +6,7 @@
</template> </template>
<div class="ivu-table-cell-tree-level" v-if="showLevel" :style="treeLevelStyle"></div> <div class="ivu-table-cell-tree-level" v-if="showLevel" :style="treeLevelStyle"></div>
<div class="ivu-table-cell-tree" v-if="showChildren" @click="handleToggleTree"> <div class="ivu-table-cell-tree" v-if="showChildren" @click="handleToggleTree">
<Icon type="ios-add" v-if="!row._isShowChildren" /> <Icon type="ios-add" v-if="!childrenExpand" />
<Icon type="ios-remove" v-else /> <Icon type="ios-remove" v-else />
</div> </div>
<div class="ivu-table-cell-tree ivu-table-cell-tree-empty" v-else-if="showTreeNode"></div> <div class="ivu-table-cell-tree ivu-table-cell-tree-empty" v-else-if="showTreeNode"></div>
@ -125,6 +125,10 @@
return { return {
'padding-left': this.treeLevel * this.tableRoot.indentSize + 'px' 'padding-left': this.treeLevel * this.tableRoot.indentSize + 'px'
}; };
},
childrenExpand () {
const data = this.tableRoot.getDataByRowKey(this.row._rowKey);
return data._isShowChildren;
} }
}, },
methods: { methods: {

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

@ -142,14 +142,15 @@
}, },
isTrShow (rowKey) { isTrShow (rowKey) {
let status = true; let status = true;
this.data.forEach(row => { for (let i in this.objData) {
const row = this.objData[i];
const showChildren = row._isShowChildren; const showChildren = row._isShowChildren;
if (row._rowKey === rowKey) { if (row._rowKey === rowKey) {
status = status && showChildren; status = status && showChildren;
} else if (row.children && row.children.length) { } else if (row.children && row.children.length) {
status = this.getTrStatus(rowKey, row, status && showChildren); status = this.getTrStatus(rowKey, row, status && showChildren);
} }
}); }
return status; return status;
}, },
getTrStatus (rowKey, data, parentStatus) { getTrStatus (rowKey, data, parentStatus) {

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

@ -698,7 +698,7 @@
const data = this.getDataByRowKey(rowKey); const data = this.getDataByRowKey(rowKey);
data._isShowChildren = !data._isShowChildren; data._isShowChildren = !data._isShowChildren;
}, },
getDataByRowKey (rowKey, objData = this.rebuildData) { getDataByRowKey (rowKey, objData = this.objData) {
let data = null; let data = null;
for (let i in objData) { for (let i in objData) {
const thisData = objData[i]; const thisData = objData[i];
@ -962,11 +962,6 @@
row._index = index; row._index = index;
row._rowKey = (typeof this.rowKey) === 'string' ? row[this.rowKey] : rowKey++; row._rowKey = (typeof this.rowKey) === 'string' ? row[this.rowKey] : rowKey++;
if (row.children && row.children.length) { if (row.children && row.children.length) {
if (row._showChildren) {
row._isShowChildren = row._showChildren;
} else {
row._isShowChildren = false;
}
row.children = this.makeChildrenData(row); row.children = this.makeChildrenData(row);
} }
}); });
@ -977,12 +972,7 @@
return data.children.map((row, index) => { return data.children.map((row, index) => {
const newRow = deepCopy(row); const newRow = deepCopy(row);
newRow._index = index; newRow._index = index;
newRow._rowKey = (typeof this.rowKey) === 'string' ? row[this.rowKey] : rowKey++; newRow._rowKey = (typeof this.rowKey) === 'string' ? newRow[this.rowKey] : rowKey++;
if (newRow._showChildren) {
newRow._isShowChildren = newRow._showChildren;
} else {
newRow._isShowChildren = false;
}
if (newRow.children && newRow.children.length) { if (newRow.children && newRow.children.length) {
newRow.children = this.makeChildrenData(newRow); newRow.children = this.makeChildrenData(newRow);
} }
@ -1022,6 +1012,9 @@
makeObjBaseData (row) { makeObjBaseData (row) {
const newRow = deepCopy(row); const newRow = deepCopy(row);
newRow._isHover = false; newRow._isHover = false;
if ((typeof this.rowKey) === 'string') {
newRow._rowKey = newRow[this.rowKey];
}
if (newRow._disabled) { if (newRow._disabled) {
newRow._isDisabled = newRow._disabled; newRow._isDisabled = newRow._disabled;
} else { } else {
@ -1049,12 +1042,11 @@
this.data.forEach((row, index) => { this.data.forEach((row, index) => {
const newRow = this.makeObjBaseData(row); const newRow = this.makeObjBaseData(row);
if (newRow.children && newRow.children.length) { if (newRow.children && newRow.children.length) {
// todo 这里不在 objData 设置 _isShowChildren 了，改在 rebuildData，否则拿不到 rowKey if (newRow._showChildren) {
// if (newRow._showChildren) { newRow._isShowChildren = newRow._showChildren;
// newRow._isShowChildren = newRow._showChildren; } else {
// } else { newRow._isShowChildren = false;
// newRow._isShowChildren = false; }
// }
newRow.children = this.makeChildrenObjData(newRow); newRow.children = this.makeChildrenObjData(newRow);
} }
data[index] = newRow; data[index] = newRow;
@ -1065,6 +1057,11 @@
if (data.children && data.children.length) { if (data.children && data.children.length) {
return data.children.map(row => { return data.children.map(row => {
const newRow = this.makeObjBaseData(row); const newRow = this.makeObjBaseData(row);
if (newRow._showChildren) {
newRow._isShowChildren = newRow._showChildren;
} else {
newRow._isShowChildren = false;
}
if (newRow.children && newRow.children.length) { if (newRow.children && newRow.children.length) {
newRow.children = this.makeChildrenObjData(newRow); newRow.children = this.makeChildrenObjData(newRow);
} }