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

update tree table async

Browse source
This commit is contained in:
梁灏 2020-01-10 11:12:49 +08:00
parent 7f4315cb4e
commit 85a1bc8af0
4 changed files with 128 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,8 +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" @click="handleToggleTree">
<Icon type="ios-add" v-if="!childrenExpand" />
<div class="ivu-table-cell-tree" :class="{ 'ivu-table-cell-tree-loading': childrenLoading }" v-if="showChildren" @click.prevent.stop="handleToggleTree">
<Icon type="ios-loading" v-if="childrenLoading" class="ivu-load-loop" />
<Icon type="ios-add" v-else-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>
@ -101,7 +102,7 @@
let status = false;
if (this.renderType === 'html' || this.renderType === 'normal' || this.renderType === 'render' || this.renderType === 'slot') {
const data = this.row;
if ((data.children && data.children.length) || ('_loading' in data && data._loading)) {
if ((data.children && data.children.length) || ('_loading' in data)) {
if (this.column.tree) status = true;
}
}
@ -129,6 +130,10 @@
childrenExpand () {
const data = this.tableRoot.getDataByRowKey(this.row._rowKey);
return data._isShowChildren;
},
childrenLoading () {
const data = this.tableRoot.getDataByRowKey(this.row._rowKey);
return '_loading' in data && data._loading;
}
},
methods: {

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

@ -262,6 +262,10 @@
indentSize: {
type: Number,
default: 16
},
// 4.1.0
loadData: {
type: Function
}
},
data () {
@ -784,6 +788,23 @@
},
toggleTree (rowKey) {
const data = this.getDataByRowKey(rowKey);
// async loading
if ('_loading' in data && data._loading) return;
if ('_loading' in data && !data._loading && data.children.length === 0) {
const sourceData = this.getBaseDataByRowKey(rowKey, this.data);
this.$set(sourceData, '_loading', true);
this.loadData(sourceData, children => {
this.$set(sourceData, '_loading', false);
if (children.length) {
// todo
this.$set(sourceData, 'children', children);
const data2 = this.getDataByRowKey(rowKey);
data2._isShowChildren = !data2._isShowChildren;
}
});
return;
}
data._isShowChildren = !data._isShowChildren;
},
getDataByRowKey (rowKey, objData = this.objData) {