Commit af7d72b4cc700c76b658b12930da52f0ee2dc8d4
1 parent
6ff0e340
update Tree selected
Showing
2 changed files
with
117 additions
and
70 deletions
Show diff stats
examples/routers/tree.vue
| @@ -94,16 +94,122 @@ | @@ -94,16 +94,122 @@ | ||
| 94 | <!--</script>--> | 94 | <!--</script>--> |
| 95 | 95 | ||
| 96 | 96 | ||
| 97 | +<!--<template>--> | ||
| 98 | + <!--<div style="width: 400px;">--> | ||
| 99 | + <!--<Tree :data="data4" :render="renderContent"></Tree>--> | ||
| 100 | + <!--</div>--> | ||
| 101 | +<!--</template>--> | ||
| 102 | +<!--<script>--> | ||
| 103 | + <!--export default {--> | ||
| 104 | + <!--data () {--> | ||
| 105 | + <!--return {--> | ||
| 106 | + <!--data4: [--> | ||
| 107 | + <!--{--> | ||
| 108 | + <!--title: 'parent 1',--> | ||
| 109 | + <!--expand: true,--> | ||
| 110 | + <!--children: [--> | ||
| 111 | + <!--{--> | ||
| 112 | + <!--title: 'parent 1-1',--> | ||
| 113 | + <!--expand: true,--> | ||
| 114 | + <!--children: [--> | ||
| 115 | + <!--{--> | ||
| 116 | + <!--title: 'leaf 1-1-1',--> | ||
| 117 | + <!--expand: true--> | ||
| 118 | + <!--},--> | ||
| 119 | + <!--{--> | ||
| 120 | + <!--title: 'leaf 1-1-2',--> | ||
| 121 | + <!--expand: true--> | ||
| 122 | + <!--}--> | ||
| 123 | + <!--]--> | ||
| 124 | + <!--},--> | ||
| 125 | + <!--{--> | ||
| 126 | + <!--title: 'parent 1-2',--> | ||
| 127 | + <!--expand: true,--> | ||
| 128 | + <!--children: [--> | ||
| 129 | + <!--{--> | ||
| 130 | + <!--title: 'leaf 1-2-1',--> | ||
| 131 | + <!--expand: true--> | ||
| 132 | + <!--},--> | ||
| 133 | + <!--{--> | ||
| 134 | + <!--title: 'leaf 1-2-1',--> | ||
| 135 | + <!--expand: true--> | ||
| 136 | + <!--}--> | ||
| 137 | + <!--]--> | ||
| 138 | + <!--}--> | ||
| 139 | + <!--]--> | ||
| 140 | + <!--}--> | ||
| 141 | + <!--],--> | ||
| 142 | + <!--buttonProps: {--> | ||
| 143 | + <!--type: 'ghost',--> | ||
| 144 | + <!--size: 'small',--> | ||
| 145 | + <!--}--> | ||
| 146 | + <!--}--> | ||
| 147 | + <!--},--> | ||
| 148 | + <!--methods: {--> | ||
| 149 | + <!--renderContent (h, { data, node, root }) {--> | ||
| 150 | + <!--return h('span', {--> | ||
| 151 | + <!--style: {--> | ||
| 152 | + <!--display: 'inline-block',--> | ||
| 153 | + <!--width: '100%'--> | ||
| 154 | + <!--}--> | ||
| 155 | + <!--}, [--> | ||
| 156 | + <!--h('span', data.title),--> | ||
| 157 | + <!--h('span', {--> | ||
| 158 | + <!--style: {--> | ||
| 159 | + <!--display: 'inline-block',--> | ||
| 160 | + <!--float: 'right',--> | ||
| 161 | + <!--marginRight: '32px'--> | ||
| 162 | + <!--}--> | ||
| 163 | + <!--}, [--> | ||
| 164 | + <!--h('Button', {--> | ||
| 165 | + <!--props: Object.assign({}, this.buttonProps, {--> | ||
| 166 | + <!--icon: 'ios-plus-empty'--> | ||
| 167 | + <!--}),--> | ||
| 168 | + <!--style: {--> | ||
| 169 | + <!--marginRight: '8px'--> | ||
| 170 | + <!--},--> | ||
| 171 | + <!--on: {--> | ||
| 172 | + <!--click: () => { this.append(data) }--> | ||
| 173 | + <!--}--> | ||
| 174 | + <!--}),--> | ||
| 175 | + <!--h('Button', {--> | ||
| 176 | + <!--props: Object.assign({}, this.buttonProps, {--> | ||
| 177 | + <!--icon: 'ios-minus-empty'--> | ||
| 178 | + <!--}),--> | ||
| 179 | + <!--on: {--> | ||
| 180 | + <!--click: () => { this.remove(node, data, root) }--> | ||
| 181 | + <!--}--> | ||
| 182 | + <!--})--> | ||
| 183 | + <!--])--> | ||
| 184 | + <!--]);--> | ||
| 185 | + <!--},--> | ||
| 186 | + <!--append (data) {--> | ||
| 187 | + <!--this.$set(data, 'children', [{--> | ||
| 188 | + <!--title: 'appended node',--> | ||
| 189 | + <!--expand: true--> | ||
| 190 | + <!--}]);--> | ||
| 191 | + <!--},--> | ||
| 192 | + <!--remove (node, data, root) {--> | ||
| 193 | + <!--const parentKey = root.find(el => el === node).parent;--> | ||
| 194 | + <!--const parent = root.find(el => el.nodeKey === parentKey).node;--> | ||
| 195 | + <!--const index = parent.children.indexOf(data);--> | ||
| 196 | + <!--parent.children.splice(index, 1);--> | ||
| 197 | + <!--}--> | ||
| 198 | + <!--}--> | ||
| 199 | + <!--}--> | ||
| 200 | +<!--</script>--> | ||
| 201 | + | ||
| 97 | <template> | 202 | <template> |
| 98 | - <div style="width: 400px;"> | ||
| 99 | - <Tree :data="data4" :render="renderContent"></Tree> | 203 | + <div> |
| 204 | + {{ data1 }} | ||
| 205 | + <Tree :data="data1"></Tree> | ||
| 100 | </div> | 206 | </div> |
| 101 | </template> | 207 | </template> |
| 102 | <script> | 208 | <script> |
| 103 | export default { | 209 | export default { |
| 104 | data () { | 210 | data () { |
| 105 | return { | 211 | return { |
| 106 | - data4: [ | 212 | + data1: [ |
| 107 | { | 213 | { |
| 108 | title: 'parent 1', | 214 | title: 'parent 1', |
| 109 | expand: true, | 215 | expand: true, |
| @@ -113,12 +219,10 @@ | @@ -113,12 +219,10 @@ | ||
| 113 | expand: true, | 219 | expand: true, |
| 114 | children: [ | 220 | children: [ |
| 115 | { | 221 | { |
| 116 | - title: 'leaf 1-1-1', | ||
| 117 | - expand: true | 222 | + title: 'leaf 1-1-1' |
| 118 | }, | 223 | }, |
| 119 | { | 224 | { |
| 120 | - title: 'leaf 1-1-2', | ||
| 121 | - expand: true | 225 | + title: 'leaf 1-1-2' |
| 122 | } | 226 | } |
| 123 | ] | 227 | ] |
| 124 | }, | 228 | }, |
| @@ -127,74 +231,17 @@ | @@ -127,74 +231,17 @@ | ||
| 127 | expand: true, | 231 | expand: true, |
| 128 | children: [ | 232 | children: [ |
| 129 | { | 233 | { |
| 130 | - title: 'leaf 1-2-1', | ||
| 131 | - expand: true | 234 | + title: 'leaf 1-2-1' |
| 132 | }, | 235 | }, |
| 133 | { | 236 | { |
| 134 | - title: 'leaf 1-2-1', | ||
| 135 | - expand: true | 237 | + title: 'leaf 1-2-1' |
| 136 | } | 238 | } |
| 137 | ] | 239 | ] |
| 138 | } | 240 | } |
| 139 | ] | 241 | ] |
| 140 | } | 242 | } |
| 141 | - ], | ||
| 142 | - buttonProps: { | ||
| 143 | - type: 'ghost', | ||
| 144 | - size: 'small', | ||
| 145 | - } | ||
| 146 | - } | ||
| 147 | - }, | ||
| 148 | - methods: { | ||
| 149 | - renderContent (h, { data, node, root }) { | ||
| 150 | - return h('span', { | ||
| 151 | - style: { | ||
| 152 | - display: 'inline-block', | ||
| 153 | - width: '100%' | ||
| 154 | - } | ||
| 155 | - }, [ | ||
| 156 | - h('span', data.title), | ||
| 157 | - h('span', { | ||
| 158 | - style: { | ||
| 159 | - display: 'inline-block', | ||
| 160 | - float: 'right', | ||
| 161 | - marginRight: '32px' | ||
| 162 | - } | ||
| 163 | - }, [ | ||
| 164 | - h('Button', { | ||
| 165 | - props: Object.assign({}, this.buttonProps, { | ||
| 166 | - icon: 'ios-plus-empty' | ||
| 167 | - }), | ||
| 168 | - style: { | ||
| 169 | - marginRight: '8px' | ||
| 170 | - }, | ||
| 171 | - on: { | ||
| 172 | - click: () => { this.append(data) } | ||
| 173 | - } | ||
| 174 | - }), | ||
| 175 | - h('Button', { | ||
| 176 | - props: Object.assign({}, this.buttonProps, { | ||
| 177 | - icon: 'ios-minus-empty' | ||
| 178 | - }), | ||
| 179 | - on: { | ||
| 180 | - click: () => { this.remove(node, data, root) } | ||
| 181 | - } | ||
| 182 | - }) | ||
| 183 | - ]) | ||
| 184 | - ]); | ||
| 185 | - }, | ||
| 186 | - append (data) { | ||
| 187 | - this.$set(data, 'children', [{ | ||
| 188 | - title: 'appended node', | ||
| 189 | - expand: true | ||
| 190 | - }]); | ||
| 191 | - }, | ||
| 192 | - remove (node, data, root) { | ||
| 193 | - const parentKey = root.find(el => el === node).parent; | ||
| 194 | - const parent = root.find(el => el.nodeKey === parentKey).node; | ||
| 195 | - const index = parent.children.indexOf(data); | ||
| 196 | - parent.children.splice(index, 1); | 243 | + ] |
| 197 | } | 244 | } |
| 198 | } | 245 | } |
| 199 | } | 246 | } |
| 200 | -</script> | ||
| 201 | \ No newline at end of file | 247 | \ No newline at end of file |
| 248 | +</script> |
src/components/tree/tree.vue
| @@ -147,9 +147,9 @@ | @@ -147,9 +147,9 @@ | ||
| 147 | }, | 147 | }, |
| 148 | handleSelect (nodeKey) { | 148 | handleSelect (nodeKey) { |
| 149 | const node = this.flatState[nodeKey].node; | 149 | const node = this.flatState[nodeKey].node; |
| 150 | - if (!this.multiple){ // reset selected | 150 | + if (!this.multiple){ // reset previously selected node |
| 151 | const currentSelectedKey = this.flatState.findIndex(obj => obj.node.selected); | 151 | const currentSelectedKey = this.flatState.findIndex(obj => obj.node.selected); |
| 152 | - if (currentSelectedKey >= 0) this.$set(this.flatState[currentSelectedKey].node, 'selected', false); | 152 | + if (currentSelectedKey >= 0 && currentSelectedKey !== nodeKey) this.$set(this.flatState[currentSelectedKey].node, 'selected', false); |
| 153 | } | 153 | } |
| 154 | this.$set(node, 'selected', !node.selected); | 154 | this.$set(node, 'selected', !node.selected); |
| 155 | 155 |