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

save

Browse source
This commit is contained in:
prefert 2020-09-03 15:53:31 +08:00
parent 8f9d3604e6
commit 5bb83ff8e5
258 changed files with 12974 additions and 7838 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<div :class="prefixCls">
<div :class="prefixCls" ref="treeWrap">
<Tree-node
v-for="(item, i) in stateTree"
:key="i"
@ -10,6 +10,13 @@
:children-key="childrenKey">
</Tree-node>
<div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div>
<div class="ivu-tree-context-menu" :style="contextMenuStyles">
<Dropdown trigger="custom" :visible="contextMenuVisible" transfer @on-clickoutside="handleClickContextMenuOutside">
<DropdownMenu slot="list">
<slot name="contextMenu"></slot>
</DropdownMenu>
</Dropdown>
</div>
</div>
</template>
<script>
@ -70,6 +77,11 @@
prefixCls: prefixCls,
stateTree: this.data,
flatState: [],
contextMenuVisible: false,
contextMenuStyles: {
top: 0,
left: 0
}
};
},
watch: {
@ -121,9 +133,9 @@
const node = this.flatState[nodeKey].node;
const parent = this.flatState[parentKey].node;
if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards
if (node.checked == true) {
// #6121
this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked || node.disabled !== undefined ));
this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked));
this.$set(parent, 'indeterminate', !parent.checked);
} else {
this.$set(parent, 'checked', false);
@ -160,16 +172,10 @@
},
updateTreeDown(node, changes = {}) {
if (this.checkStrictly) return;
for (let key in changes) {
// after #6121
if( key === 'checked' && node.disabled ){
this.$set(node, key, node.checked);
}else{
this.$set(node, key, changes[key]);
}
// before -- this.$set(node, key, changes[key]);
}
for (let key in changes) {
this.$set(node, key, changes[key]);
}
if (node[this.childrenKey]) {
node[this.childrenKey].forEach(child => {
this.updateTreeDown(child, changes);
@ -177,6 +183,7 @@
}
},
handleSelect (nodeKey) {
if (!this.flatState[nodeKey]) return;
const node = this.flatState[nodeKey].node;
if (!this.multiple){ // reset previously selected node
const currentSelectedKey = this.flatState.findIndex(obj => obj.node.selected);
@ -187,6 +194,7 @@
this.$emit('on-select-change', this.getSelectedNodes(), node);
},
handleCheck({ checked, nodeKey }) {
if (!this.flatState[nodeKey]) return;
const node = this.flatState[nodeKey].node;
this.$set(node, 'checked', checked);
this.$set(node, 'indeterminate', false);
@ -195,6 +203,23 @@
this.updateTreeDown(node, {checked, indeterminate: false}); // reset `indeterminate` when going down
this.$emit('on-check-change', this.getCheckedNodes(), node);
},
handleContextmenu ({ data, event }) {
if (this.contextMenuVisible) this.handleClickContextMenuOutside();
this.$nextTick(() => {
const $TreeWrap = this.$refs.treeWrap;
const TreeBounding = $TreeWrap.getBoundingClientRect();
const position = {
left: `${event.clientX - TreeBounding.left}px`,
top: `${event.clientY - TreeBounding.top}px`
};
this.contextMenuStyles = position;
this.contextMenuVisible = true;
this.$emit('on-contextmenu', data, event, position);
});
},
handleClickContextMenuOutside () {
this.contextMenuVisible = false;
}
},
created(){
@ -205,6 +230,7 @@
this.$on('on-check', this.handleCheck);
this.$on('on-selected', this.handleSelect);
this.$on('toggle-expand', node => this.$emit('on-toggle-expand', node));
this.$on('contextmenu', this.handleContextmenu);
}
};
</script>