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

update Tree selected

Browse source
This commit is contained in:
梁灏 2017-10-25 22:34:58 +08:00
parent 6ff0e34003
commit af7d72b4cc
2 changed files with 117 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

181
examples/routers/tree.vue
View file

@ -94,16 +94,122 @@
<!--</script>--> <!--</script>-->
<!--<template>-->
<!--<div style="width: 400px;">-->
<!--<Tree :data="data4" :render="renderContent"></Tree>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data4: [-->
<!--{-->
<!--title: 'parent 1',-->
<!--expand: true,-->
<!--children: [-->
<!--{-->
<!--title: 'parent 1-1',-->
<!--expand: true,-->
<!--children: [-->
<!--{-->
<!--title: 'leaf 1-1-1',-->
<!--expand: true-->
<!--},-->
<!--{-->
<!--title: 'leaf 1-1-2',-->
<!--expand: true-->
<!--}-->
<!--]-->
<!--},-->
<!--{-->
<!--title: 'parent 1-2',-->
<!--expand: true,-->
<!--children: [-->
<!--{-->
<!--title: 'leaf 1-2-1',-->
<!--expand: true-->
<!--},-->
<!--{-->
<!--title: 'leaf 1-2-1',-->
<!--expand: true-->
<!--}-->
<!--]-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--buttonProps: {-->
<!--type: 'ghost',-->
<!--size: 'small',-->
<!--}-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--renderContent (h, { data, node, root }) {-->
<!--return h('span', {-->
<!--style: {-->
<!--display: 'inline-block',-->
<!--width: '100%'-->
<!--}-->
<!--}, [-->
<!--h('span', data.title),-->
<!--h('span', {-->
<!--style: {-->
<!--display: 'inline-block',-->
<!--float: 'right',-->
<!--marginRight: '32px'-->
<!--}-->
<!--}, [-->
<!--h('Button', {-->
<!--props: Object.assign({}, this.buttonProps, {-->
<!--icon: 'ios-plus-empty'-->
<!--}),-->
<!--style: {-->
<!--marginRight: '8px'-->
<!--},-->
<!--on: {-->
<!--click: () => { this.append(data) }-->
<!--}-->
<!--}),-->
<!--h('Button', {-->
<!--props: Object.assign({}, this.buttonProps, {-->
<!--icon: 'ios-minus-empty'-->
<!--}),-->
<!--on: {-->
<!--click: () => { this.remove(node, data, root) }-->
<!--}-->
<!--})-->
<!--])-->
<!--]);-->
<!--},-->
<!--append (data) {-->
<!--this.$set(data, 'children', [{-->
<!--title: 'appended node',-->
<!--expand: true-->
<!--}]);-->
<!--},-->
<!--remove (node, data, root) {-->
<!--const parentKey = root.find(el => el === node).parent;-->
<!--const parent = root.find(el => el.nodeKey === parentKey).node;-->
<!--const index = parent.children.indexOf(data);-->
<!--parent.children.splice(index, 1);-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<div style="width: 400px;"> <div>
<Tree :data="data4" :render="renderContent"></Tree> {{ data1 }}
<Tree :data="data1"></Tree>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
data4: [ data1: [
{ {
title: 'parent 1', title: 'parent 1',
expand: true, expand: true,
@ -113,12 +219,10 @@
expand: true, expand: true,
children: [ children: [
{ {
title: 'leaf 1-1-1', title: 'leaf 1-1-1'
expand: true
}, },
{ {
title: 'leaf 1-1-2', title: 'leaf 1-1-2'
expand: true
} }
] ]
}, },
@ -127,73 +231,16 @@
expand: true, expand: true,
children: [ children: [
{ {
title: 'leaf 1-2-1', title: 'leaf 1-2-1'
expand: true
}, },
{ {
title: 'leaf 1-2-1', title: 'leaf 1-2-1'
expand: true
} }
] ]
} }
] ]
} }
], ]
buttonProps: {
type: 'ghost',
size: 'small',
}
}
},
methods: {
renderContent (h, { data, node, root }) {
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span', data.title),
h('span', {
style: {
display: 'inline-block',
float: 'right',
marginRight: '32px'
}
}, [
h('Button', {
props: Object.assign({}, this.buttonProps, {
icon: 'ios-plus-empty'
}),
style: {
marginRight: '8px'
},
on: {
click: () => { this.append(data) }
}
}),
h('Button', {
props: Object.assign({}, this.buttonProps, {
icon: 'ios-minus-empty'
}),
on: {
click: () => { this.remove(node, data, root) }
}
})
])
]);
},
append (data) {
this.$set(data, 'children', [{
title: 'appended node',
expand: true
}]);
},
remove (node, data, root) {
const parentKey = root.find(el => el === node).parent;
const parent = root.find(el => el.nodeKey === parentKey).node;
const index = parent.children.indexOf(data);
parent.children.splice(index, 1);
} }
} }
} }

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

@ -147,9 +147,9 @@
}, },
handleSelect (nodeKey) { handleSelect (nodeKey) {
const node = this.flatState[nodeKey].node; const node = this.flatState[nodeKey].node;
if (!this.multiple){ // reset selected if (!this.multiple){ // reset previously selected node
const currentSelectedKey = this.flatState.findIndex(obj => obj.node.selected); const currentSelectedKey = this.flatState.findIndex(obj => obj.node.selected);
if (currentSelectedKey >= 0) this.$set(this.flatState[currentSelectedKey].node, 'selected', false); if (currentSelectedKey >= 0 && currentSelectedKey !== nodeKey) this.$set(this.flatState[currentSelectedKey].node, 'selected', false);
} }
this.$set(node, 'selected', !node.selected); this.$set(node, 'selected', !node.selected);