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

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

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

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

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

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

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