drip-public/iview
6
1
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
Show stats Download patch file Download diff file Expand all files Collapse all files

103
examples/routers/table.vue
View file

@ -1,6 +1,6 @@
<template>
<div style="margin: 100px;">
<Table border ref="selection" :columns="columns5" :data="data2"></Table>
<!-- <Table border ref="selection" :columns="columns5" :data="data2"></Table>-->
<Divider></Divider>
<Table
border
@ -15,12 +15,16 @@
ref="selection"
:columns="columns4"
:data="data1"
row-key="id">
row-key="id"
:load-data="loadData"
>
<template slot-scope="{ row }" slot="age">
<strong>{{row.age}}</strong>
</template>
</Table>
<br><br>
<Button @click="addData">添加数据</Button>
<Button @click="addData2">添加数据2</Button>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
</div>
@ -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
})
}
}
}

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) {

9
src/styles/components/table.less
View file

@ -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;