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 | 147 | <!--}--> |
| 148 | 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 | 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 | 222 | </template> |
| 154 | 223 | <script> |
| 155 | 224 | export default { |
| ... | ... | @@ -168,44 +237,37 @@ |
| 168 | 237 | children: [], |
| 169 | 238 | loading:false |
| 170 | 239 | } |
| 171 | - ] | |
| 240 | + ], | |
| 241 | + data: [], | |
| 242 | + model: [340000, 340100, 340104], | |
| 243 | + count: 1, | |
| 244 | + logs: [] | |
| 172 | 245 | } |
| 173 | 246 | }, |
| 174 | 247 | methods: { |
| 175 | 248 | loadData (item, callback) { |
| 249 | + this.logs.push(`第${this.count}次请求: ${item.value}`) | |
| 250 | + this.count++ | |
| 176 | 251 | item.loading = true; |
| 177 | 252 | setTimeout(() => { |
| 178 | - if (item.value === 'beijing') { | |
| 253 | + if (item.value === 340000) { | |
| 179 | 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 | 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 | 263 | item.loading = false; |
| 206 | 264 | callback(); |
| 207 | 265 | }, 1000); |
| 208 | 266 | } |
| 267 | + }, | |
| 268 | + mounted() { | |
| 269 | + this.data = [{value: 340000, label: "安徽省", children: [], loading: false}]; | |
| 209 | 270 | } |
| 210 | 271 | } |
| 211 | 272 | </script> |
| 273 | + | ... | ... |
src/components/cascader/caspanel.vue
| ... | ... | @@ -48,20 +48,23 @@ |
| 48 | 48 | methods: { |
| 49 | 49 | handleClickItem (item) { |
| 50 | 50 | if (this.trigger !== 'click' && item.children) return; |
| 51 | - this.handleTriggerItem(item); | |
| 51 | + this.handleTriggerItem(item, false, true); | |
| 52 | 52 | }, |
| 53 | 53 | handleHoverItem (item) { |
| 54 | 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 | 58 | if (item.disabled) return; |
| 59 | 59 | |
| 60 | 60 | if (item.loading !== undefined && !item.children.length) { |
| 61 | 61 | const cascader = findComponentUpward(this, 'Cascader'); |
| 62 | 62 | if (cascader && cascader.loadData) { |
| 63 | 63 | cascader.loadData(item, () => { |
| 64 | - cascader.isLoadedChildren = true; | |
| 64 | + // todo | |
| 65 | + if (fromUser) { | |
| 66 | + cascader.isLoadedChildren = true; | |
| 67 | + } | |
| 65 | 68 | this.handleTriggerItem(item); |
| 66 | 69 | }); |
| 67 | 70 | return; | ... | ... |