diff --git a/examples/routers/table.vue b/examples/routers/table.vue index c340b81b..0b1e0a85 100644 --- a/examples/routers/table.vue +++ b/examples/routers/table.vue @@ -1,6 +1,6 @@
-
- +
+ +
@@ -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: { diff --git a/src/components/table/table.vue b/src/components/table/table.vue index d1d4d18a..e18194d0 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -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) { diff --git a/src/styles/components/table.less b/src/styles/components/table.less index 541667a0..ef061290 100644 --- a/src/styles/components/table.less +++ b/src/styles/components/table.less @@ -275,6 +275,15 @@ border-color: transparent; } + &-loading{ + cursor: default; + background-color: transparent; + border-color: transparent; + &:hover{ + border-color: transparent; + } + } + &-level{ display: inline-block; height: 16px;