Cascader support loadData async

梁灏
1 parent 13a940ee
Showing 4 changed files with 71 additions and 15 deletions Show diff stats
examples/routers/cascader.vue
src/components/cascader/cascader.vue
src/components/cascader/casitem.vue
src/components/cascader/caspanel.vue
 <template>
-    <div style="width: 300px;margin: 100px;">
-        <Cascader :data="data2" v-model="v1" change-on-select></Cascader>
-    </div>
+    <Row>
+        <i-col span="4">
+            <Button @click="handleLoad">load</Button>
+        </i-col>
+        <i-col span="6">
+            <!--<Cascader :data="data2" v-model="v1" change-on-select></Cascader>-->
+            <Cascader :data="data2" v-model="v1" :loadData="loadData"></Cascader>
+        </i-col>
+    </Row>
 </template>
 <script>
     export default {
         data () {
             return {
-                v1: ['zhejiang'],
+                v1: [],
                 data2: [{
                     value: 'zhejiang',
                     label: '浙江',
-                    children: [{
-                        value: 'hangzhou',
-                        label: '杭州',
-                        children: [{
-                            value: 'xihu',
-                            label: '西湖'
-                        }]
-                    }]
+                    children: [],
+                    loading: false
                 }, {
                     value: 'jiangsu',
                     label: '江苏',
@@ -32,6 +32,35 @@
                     }]
                 }]
             }
+        },
+        methods: {
+            handleLoad () {
+                this.data2[0].loading = !this.data2[0].loading;
+            },
+            loadData (item, cb) {
+                item.loading = true;
+                setTimeout(() => {
+                    if (item.value === 'zhejiang') {
+                        item.children = [
+                            {
+                                value: 'hangzhou',
+                                label: '杭州',
+                                loading: false,
+                                children: []
+                            }
+                        ];
+                    } else if (item.value === 'hangzhou') {
+                        item.children = [
+                            {
+                                value: 'ali',
+                                label: '阿里巴巴'
+                            }
+                        ];
+                    }
+                    item.loading = false;
+                    cb();
+                }, 1000);
+            }
         }
     }
 </script>
@@ -88,6 +88,9 @@
                 default (label) {
                     return label.join(' / ');
                 }
+            },
+            loadData: {
+                type: Function
             }
         },
         data () {
@@ -224,8 +227,11 @@
                 }
                 this.updateSelected(true);
             },
-            data () {
-                this.$nextTick(() => this.updateSelected());
+            data: {
+                deep: true,
+                handler () {
+                    this.$nextTick(() => this.updateSelected());
+                }
             }
         }
     };
 <template>
-    <li :class="classes">{{ data.label }}<i v-if="data.children && data.children.length" class="ivu-icon ivu-icon-ios-arrow-right"></i></li>
+    <li :class="classes">
+        {{ data.label }}
+        <i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-right"></i>
+        <i v-if="showLoading" class="ivu-icon ivu-icon-load-c ivu-load-loop"></i>
+    </li>
 </template>
 <script>
     export default {
@@ -18,6 +22,12 @@
                         [`${this.prefixCls}-menu-item-disabled`]: this.data.disabled
                     }
                 ];
+            },
+            showArrow () {
+                return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading);
+            },
+            showLoading () {
+                return 'loading' in this.data && this.data.loading;
             }
         }
     };
@@ -15,6 +15,7 @@
 <script>
     import Casitem from './casitem.vue';
     import Emitter from '../../mixins/emitter';
+    import { findComponentUpward } from '../../utils/assist';
  
     export default {
         name: 'Caspanel',
@@ -56,6 +57,16 @@
             handleTriggerItem (item, fromInit = false) {
                 if (item.disabled) return;
  
+                if (item.loading !== undefined && !item.children.length) {
+                    const cascader = findComponentUpward(this, 'Cascader');
+                    if (cascader && cascader.loadData) {
+                        cascader.loadData(item, () => {
+                            this.handleTriggerItem(item);
+                        });
+                        return;
+                    }
+                }
+
                 // return value back recursion  // 向上递归，设置临时选中值（并非真实选中）
                 const backItem = this.getBaseItem(item);
                 this.tmpItem = backItem;