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-03 16:22:12 +08:00
parent 34fc2db44e
commit 40f055f904
4 changed files with 64 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/routers/table.vue
View file

@ -45,6 +45,7 @@
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01',
_showChildren: false,
children: [
{
name: '张三',

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

@ -5,9 +5,9 @@
<Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template>
<div class="ivu-table-cell-tree-level" v-if="showLevel" :style="treeLevelStyle"></div>
<div class="ivu-table-cell-tree" v-if="showChildren">
<Icon type="ios-add" v-if="!row._isShowChildren" @click="handleOpenTree" />
<Icon type="ios-remove" v-else @click="handleCloseTree" />
<div class="ivu-table-cell-tree" v-if="showChildren" @click="handleToggleTree">
<Icon type="ios-add" v-if="!row._isShowChildren" />
<Icon type="ios-remove" v-else />
</div>
<div class="ivu-table-cell-tree ivu-table-cell-tree-empty" v-else-if="showTreeNode"></div>
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
@ -150,11 +150,8 @@
handleTooltipHide () {
this.tooltipShow = false;
},
handleOpenTree () {
},
handleCloseTree () {
handleToggleTree () {
this.$parent.$parent.$parent.toggleTree(this.row._rowKey);
}
},
created () {

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

@ -89,12 +89,16 @@
rowChecked (_index) {
return this.objData[_index] && this.objData[_index]._isChecked;
},
rowDisabled(_index){
rowDisabled (_index) {
return this.objData[_index] && this.objData[_index]._isDisabled;
},
rowExpanded(_index){
rowExpanded (_index) {
return this.objData[_index] && this.objData[_index]._isExpanded;
},
// todo
rowShowChildren (_index) {
return this.objData[_index] && this.objData[_index]._isShowChildren;
},
handleMouseIn (_index, event) {
event.stopPropagation();
this.$parent.handleMouseIn(_index);
@ -172,12 +176,18 @@
}
});
// 判断节点是否展开
const trStyle = {};
// todo
if (!this.rowShowChildren(row._index)) trStyle.display = 'none';
const $tableTr = h(TableTr, {
props: {
draggable: false,
row: row,
'prefix-cls': this.prefixCls
},
style: trStyle,
key: this.rowKey ? row._rowKey : index,
nativeOn: {
mouseenter: (e) => this.handleMouseIn(row._index, e),

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

@ -693,6 +693,36 @@
this.$nextTick(()=>this.fixedBody());
}
},
toggleTree (rowKey) {
const data = this.getDataByRowKey(rowKey);
data._isShowChildren = !data._isShowChildren;
},
getDataByRowKey (rowKey, objData = this.rebuildData) {
let data = null;
for (let i in objData) {
const thisData = objData[i];
if (thisData._rowKey === rowKey) {
data = thisData;
break;
} else if (thisData.children && thisData.children.length) {
data = this.getChildrenByRowKey(rowKey, thisData);
}
}
return data;
},
getChildrenByRowKey (rowKey, objData) {
let data = null;
if (objData.children && objData.children.length) {
objData.children.forEach(item => {
if (item._rowKey === rowKey) {
data = item;
} else if (item.children && item.children.length) {
data = this.getChildrenByRowKey(rowKey, item);
}
});
}
return data;
},
selectAll (status) {
// this.rebuildData.forEach((data) => {
// if(this.objData[data._index]._isDisabled){
@ -931,6 +961,11 @@
row._index = index;
row._rowKey = rowKey++;
if (row.children && row.children.length) {
if (row._showChildren) {
row._isShowChildren = row._showChildren;
} else {
row._isShowChildren = false;
}
row.children = this.makeChildrenData(row);
}
});
@ -942,6 +977,11 @@
const newRow = deepCopy(row);
newRow._index = index;
newRow._rowKey = rowKey++;
if (newRow._showChildren) {
newRow._isShowChildren = newRow._showChildren;
} else {
newRow._isShowChildren = false;
}
if (newRow.children && newRow.children.length) {
newRow.children = this.makeChildrenData(newRow);
}
@ -1008,11 +1048,12 @@
this.data.forEach((row, index) => {
const newRow = this.makeObjBaseData(row);
if (newRow.children && newRow.children.length) {
if (newRow._showChildren) {
newRow._isShowChildren = newRow._showChildren;
} else {
newRow._isShowChildren = false;
}
// todo 这里不在 objData 设置 _isShowChildren 了，改在 rebuildData，否则拿不到 rowKey
// if (newRow._showChildren) {
// newRow._isShowChildren = newRow._showChildren;
// } else {
// newRow._isShowChildren = false;
// }
newRow.children = this.makeChildrenObjData(newRow);
}
data[index] = newRow;