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 @@
-
+
+ row-key="id"
+ :load-data="loadData"
+ >
{{row.age}}
+
+
@@ -102,7 +106,9 @@
address: 'New York No. 1 Lake Park',
date: '2016-10-03',
_disabled: true,
- level: 0
+ level: 0,
+ // _loading: false,
+ // children: []
},
{
id: '101',
@@ -186,17 +192,36 @@
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02',
_disabled: false,
- level: 0
+ level: 0,
+ _showChildren: true,
+ children: [
+ {
+ id: '10200',
+ name: '张三3',
+ age: 235,
+ address: '发动机莲富大厦放假了开始的',
+ date: '2016-10-01',
+ level: 1
+ },
+ {
+ id: '10201',
+ name: '张三4',
+ age: 235,
+ address: '发动机莲富大厦放假了开始的',
+ date: '2016-10-01',
+ level: 1
+ },
+ ]
},
- {
- id: '103',
- name: 'Jon Snow',
- age: 126,
- address: 'Ottawa No. 2 Lake Park',
- date: '2016-10-04',
- _disabled: true,
- level: 0
- }
+ // {
+ // id: '103',
+ // name: 'Jon Snow',
+ // age: 126,
+ // address: 'Ottawa No. 2 Lake Park',
+ // date: '2016-10-04',
+ // _disabled: true,
+ // level: 0
+ // }
],
columns5: [
{
@@ -314,6 +339,58 @@
},
osac (s) {
console.log(s);
+ },
+ loadData (item, callback) {
+ setTimeout(() => {
+ const data = [
+ {
+ id: '10000',
+ name: '张三1',
+ age: 123,
+ address: '1发动机莲富大厦放假了开始的',
+ date: '2016-10-01'
+ },
+ {
+ id: '10001',
+ name: '张三2',
+ age: 124,
+ address: '2发动机莲富大厦放假了开始的',
+ date: '2016-10-02'
+ },
+ ];
+ callback(data);
+ }, 100);
+ },
+ addData () {
+ const d = this.data1[3];
+ d.children = [
+ {
+ id: '10000',
+ name: '张三1',
+ age: 123,
+ address: '1发动机莲富大厦放假了开始的',
+ date: '2016-10-01'
+ },
+ {
+ id: '10001',
+ name: '张三2',
+ age: 124,
+ address: '2发动机莲富大厦放假了开始的',
+ date: '2016-10-02'
+ }
+ ];
+ this.$set(this.data1, 3, d);
+ },
+ addData2 () {
+ this.data1.push({
+ id: '104',
+ name: 'Jon Snow4',
+ age: 124,
+ address: 'Ottawa No. 2 Lake Park',
+ date: '2016-10-04',
+ _disabled: true,
+ level: 0
+ })
}
}
}
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 6d450092..b226d8d2 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -5,8 +5,9 @@
-
-
+
+
+
@@ -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;