other / mew-iview

Commit af7d72b4cc700c76b658b12930da52f0ee2dc8d4

Authored by 梁灏
1 parent 6ff0e340

update Tree selected

Showing 2 changed files with 117 additions and 70 deletions   Show diff stats
Inline Side-by-side
examples/routers/tree.vue
  Show/Hide comments   View file @af7d72b
... ... @@ -94,16 +94,122 @@
94 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 202 <template>
98   - <div style="width: 400px;">
99   - <Tree :data="data4" :render="renderContent"></Tree>
  203 + <div>
  204 + {{ data1 }}
  205 + <Tree :data="data1"></Tree>
100 206 </div>
101 207 </template>
102 208 <script>
103 209 export default {
104 210 data () {
105 211 return {
106   - data4: [
  212 + data1: [
107 213 {
108 214 title: 'parent 1',
109 215 expand: true,
... ... @@ -113,12 +219,10 @@
113 219 expand: true,
114 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 231 expand: true,
128 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 247 \ No newline at end of file
  248 +</script>
... ...
src/components/tree/tree.vue
  Show/Hide comments   View file @af7d72b
... ... @@ -147,9 +147,9 @@
147 147 },
148 148 handleSelect (nodeKey) {
149 149 const node = this.flatState[nodeKey].node;
150   - if (!this.multiple){ // reset selected
  150 + if (!this.multiple){ // reset previously selected node
151 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 154 this.$set(node, 'selected', !node.selected);
155 155  
... ...