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

Add new props 'childrenKey' to Tree component

Browse source
This commit is contained in:
vanppo 2018-03-26 20:09:18 +08:00
parent a0f489478b
commit 56c7cc0efc
2 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/tree/node.vue
View file

@ -17,11 +17,12 @@
<span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span> <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
<Tree-node <Tree-node
v-if="data.expand" v-if="data.expand"
v-for="(item, i) in data.children" v-for="(item, i) in children"
:key="i" :key="i"
:data="item" :data="item"
:multiple="multiple" :multiple="multiple"
:show-checkbox="showCheckbox"> :show-checkbox="showCheckbox"
:children-key="childrenKey">
</Tree-node> </Tree-node>
</li> </li>
</ul> </ul>
@ -52,6 +53,10 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
childrenKey: {
type: String,
default: 'children'
},
showCheckbox: { showCheckbox: {
type: Boolean, type: Boolean,
default: false default: false
@ -93,7 +98,7 @@
]; ];
}, },
showArrow () { showArrow () {
return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading); return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading);
}, },
showLoading () { showLoading () {
return 'loading' in this.data && this.data.loading; return 'loading' in this.data && this.data.loading;
@ -118,6 +123,9 @@
} else { } else {
return []; return [];
} }
},
children () {
return this.data[this.childrenKey];
} }
}, },
methods: { methods: {
@ -126,14 +134,14 @@
if (item.disabled) return; if (item.disabled) return;
// async loading // async loading
if (item.children.length === 0) { if (item[this.childrenKey].length === 0) {
const tree = findComponentUpward(this, 'Tree'); const tree = findComponentUpward(this, 'Tree');
if (tree && tree.loadData) { if (tree && tree.loadData) {
this.$set(this.data, 'loading', true); this.$set(this.data, 'loading', true);
tree.loadData(item, children => { tree.loadData(item, children => {
this.$set(this.data, 'loading', false); this.$set(this.data, 'loading', false);
if (children.length) { if (children.length) {
this.$set(this.data, 'children', children); this.$set(this.data, this.childrenKey, children);
this.$nextTick(() => this.handleExpand()); this.$nextTick(() => this.handleExpand());
} }
}); });
@ -141,7 +149,7 @@
} }
} }
if (item.children && item.children.length) { if (item[this.childrenKey] && item[this.childrenKey].length) {
this.$set(this.data, 'expand', !this.data.expand); this.$set(this.data, 'expand', !this.data.expand);
this.dispatch('Tree', 'toggle-expand', this.data); this.dispatch('Tree', 'toggle-expand', this.data);
} }

7
src/components/tree/tree.vue
View file

@ -6,7 +6,8 @@
:data="item" :data="item"
visible visible
:multiple="multiple" :multiple="multiple"
:show-checkbox="showCheckbox"> :show-checkbox="showCheckbox"
:children-key="childrenKey">
</Tree-node> </Tree-node>
<div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div> <div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div>
</div> </div>
@ -40,6 +41,10 @@
emptyText: { emptyText: {
type: String type: String
}, },
childrenKey: {
type: String,
default: 'children'
},
loadData: { loadData: {
type: Function type: Function
}, },