Commit 03a904529d5cac75faa7cbe0d5c3a61dba7543fa
1 parent
933afc7a
update Cascader
Showing
2 changed files
with
93 additions
and
28 deletions
Show diff stats
examples/routers/cascader.vue
| @@ -147,9 +147,78 @@ | @@ -147,9 +147,78 @@ | ||
| 147 | <!--}--> | 147 | <!--}--> |
| 148 | <!--</script>--> | 148 | <!--</script>--> |
| 149 | 149 | ||
| 150 | +<!--<template>--> | ||
| 151 | + <!--<Cascader :data="data4" :load-data="loadData"></Cascader>--> | ||
| 152 | +<!--</template>--> | ||
| 153 | +<!--<script>--> | ||
| 154 | + <!--export default {--> | ||
| 155 | + <!--data () {--> | ||
| 156 | + <!--return {--> | ||
| 157 | + <!--data4: [--> | ||
| 158 | + <!--{--> | ||
| 159 | + <!--value: 'beijing',--> | ||
| 160 | + <!--label: '北京',--> | ||
| 161 | + <!--children: [],--> | ||
| 162 | + <!--loading: false--> | ||
| 163 | + <!--},--> | ||
| 164 | + <!--{--> | ||
| 165 | + <!--value: 'hangzhou',--> | ||
| 166 | + <!--label: '杭州',--> | ||
| 167 | + <!--children: [],--> | ||
| 168 | + <!--loading:false--> | ||
| 169 | + <!--}--> | ||
| 170 | + <!--]--> | ||
| 171 | + <!--}--> | ||
| 172 | + <!--},--> | ||
| 173 | + <!--methods: {--> | ||
| 174 | + <!--loadData (item, callback) {--> | ||
| 175 | + <!--item.loading = true;--> | ||
| 176 | + <!--setTimeout(() => {--> | ||
| 177 | + <!--if (item.value === 'beijing') {--> | ||
| 178 | + <!--item.children = [--> | ||
| 179 | + <!--{--> | ||
| 180 | + <!--value: 'talkingdata',--> | ||
| 181 | + <!--label: 'TalkingData'--> | ||
| 182 | + <!--},--> | ||
| 183 | + <!--{--> | ||
| 184 | + <!--value: 'baidu',--> | ||
| 185 | + <!--label: '百度'--> | ||
| 186 | + <!--},--> | ||
| 187 | + <!--{--> | ||
| 188 | + <!--value: 'sina',--> | ||
| 189 | + <!--label: '新浪'--> | ||
| 190 | + <!--}--> | ||
| 191 | + <!--];--> | ||
| 192 | + <!--} else if (item.value === 'hangzhou') {--> | ||
| 193 | + <!--item.children = [--> | ||
| 194 | + <!--{--> | ||
| 195 | + <!--value: 'ali',--> | ||
| 196 | + <!--label: '阿里巴巴'--> | ||
| 197 | + <!--},--> | ||
| 198 | + <!--{--> | ||
| 199 | + <!--value: '163',--> | ||
| 200 | + <!--label: '网易'--> | ||
| 201 | + <!--}--> | ||
| 202 | + <!--];--> | ||
| 203 | + <!--}--> | ||
| 204 | + <!--item.loading = false;--> | ||
| 205 | + <!--callback();--> | ||
| 206 | + <!--}, 1000);--> | ||
| 207 | + <!--}--> | ||
| 208 | + <!--}--> | ||
| 209 | + <!--}--> | ||
| 210 | +<!--</script>--> | ||
| 211 | + | ||
| 212 | + | ||
| 150 | 213 | ||
| 151 | <template> | 214 | <template> |
| 152 | - <Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader> | 215 | + <!--<Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader>--> |
| 216 | + <div> | ||
| 217 | + <Cascader :data="data" v-model="model" :load-data="loadData"></Cascader> | ||
| 218 | + <ul> | ||
| 219 | + <li v-for="(log, idx) in logs" :key="idx">{{log}}</li> | ||
| 220 | + </ul> | ||
| 221 | + </div> | ||
| 153 | </template> | 222 | </template> |
| 154 | <script> | 223 | <script> |
| 155 | export default { | 224 | export default { |
| @@ -168,44 +237,37 @@ | @@ -168,44 +237,37 @@ | ||
| 168 | children: [], | 237 | children: [], |
| 169 | loading:false | 238 | loading:false |
| 170 | } | 239 | } |
| 171 | - ] | 240 | + ], |
| 241 | + data: [], | ||
| 242 | + model: [340000, 340100, 340104], | ||
| 243 | + count: 1, | ||
| 244 | + logs: [] | ||
| 172 | } | 245 | } |
| 173 | }, | 246 | }, |
| 174 | methods: { | 247 | methods: { |
| 175 | loadData (item, callback) { | 248 | loadData (item, callback) { |
| 249 | + this.logs.push(`第${this.count}次请求: ${item.value}`) | ||
| 250 | + this.count++ | ||
| 176 | item.loading = true; | 251 | item.loading = true; |
| 177 | setTimeout(() => { | 252 | setTimeout(() => { |
| 178 | - if (item.value === 'beijing') { | 253 | + if (item.value === 340000) { |
| 179 | item.children = [ | 254 | item.children = [ |
| 180 | - { | ||
| 181 | - value: 'talkingdata', | ||
| 182 | - label: 'TalkingData' | ||
| 183 | - }, | ||
| 184 | - { | ||
| 185 | - value: 'baidu', | ||
| 186 | - label: '百度' | ||
| 187 | - }, | ||
| 188 | - { | ||
| 189 | - value: 'sina', | ||
| 190 | - label: '新浪' | ||
| 191 | - } | 255 | + {value: 340100, label: "合肥市", children: [], loading: false} |
| 192 | ]; | 256 | ]; |
| 193 | - } else if (item.value === 'hangzhou') { | 257 | + } else if (item.value === 340100) { |
| 194 | item.children = [ | 258 | item.children = [ |
| 195 | - { | ||
| 196 | - value: 'ali', | ||
| 197 | - label: '阿里巴巴' | ||
| 198 | - }, | ||
| 199 | - { | ||
| 200 | - value: '163', | ||
| 201 | - label: '网易' | ||
| 202 | - } | 259 | + {value: 340104, label: "蜀山区"}, |
| 260 | + {value: 340111, label: "包河区"} | ||
| 203 | ]; | 261 | ]; |
| 204 | } | 262 | } |
| 205 | item.loading = false; | 263 | item.loading = false; |
| 206 | callback(); | 264 | callback(); |
| 207 | }, 1000); | 265 | }, 1000); |
| 208 | } | 266 | } |
| 267 | + }, | ||
| 268 | + mounted() { | ||
| 269 | + this.data = [{value: 340000, label: "安徽省", children: [], loading: false}]; | ||
| 209 | } | 270 | } |
| 210 | } | 271 | } |
| 211 | </script> | 272 | </script> |
| 273 | + |
src/components/cascader/caspanel.vue
| @@ -48,20 +48,23 @@ | @@ -48,20 +48,23 @@ | ||
| 48 | methods: { | 48 | methods: { |
| 49 | handleClickItem (item) { | 49 | handleClickItem (item) { |
| 50 | if (this.trigger !== 'click' && item.children) return; | 50 | if (this.trigger !== 'click' && item.children) return; |
| 51 | - this.handleTriggerItem(item); | 51 | + this.handleTriggerItem(item, false, true); |
| 52 | }, | 52 | }, |
| 53 | handleHoverItem (item) { | 53 | handleHoverItem (item) { |
| 54 | if (this.trigger !== 'hover' || !item.children) return; | 54 | if (this.trigger !== 'hover' || !item.children) return; |
| 55 | - this.handleTriggerItem(item); | 55 | + this.handleTriggerItem(item, false, true); |
| 56 | }, | 56 | }, |
| 57 | - handleTriggerItem (item, fromInit = false) { | 57 | + handleTriggerItem (item, fromInit = false, fromUser = false) { |
| 58 | if (item.disabled) return; | 58 | if (item.disabled) return; |
| 59 | 59 | ||
| 60 | if (item.loading !== undefined && !item.children.length) { | 60 | if (item.loading !== undefined && !item.children.length) { |
| 61 | const cascader = findComponentUpward(this, 'Cascader'); | 61 | const cascader = findComponentUpward(this, 'Cascader'); |
| 62 | if (cascader && cascader.loadData) { | 62 | if (cascader && cascader.loadData) { |
| 63 | cascader.loadData(item, () => { | 63 | cascader.loadData(item, () => { |
| 64 | - cascader.isLoadedChildren = true; | 64 | + // todo |
| 65 | + if (fromUser) { | ||
| 66 | + cascader.isLoadedChildren = true; | ||
| 67 | + } | ||
| 65 | this.handleTriggerItem(item); | 68 | this.handleTriggerItem(item); |
| 66 | }); | 69 | }); |
| 67 | return; | 70 | return; |