iview Cascader使用动态加载选项时设置默认值

原文章链接地址：https://codepen.io/02954/pen/MzMMYw

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <div>
      <h4>iView Cascader 既能设置初始值，又能点击菜单选项值变化</h4>
      <p>change-on-select当然得设置，且必须动态的设置</p>
    </div>
    <br />
    <p></p>
    <cascader :data="data4" :load-data="loadData" :change-on-select="changeOnSelect" v-model="value2" @on-visible-change="handleChangeOnSelect"></cascader>
    <br />
</div>

JS

    var Main = {
        data () {
            return {
            		value2: ['beijing', 'baidu'],
              changeOnSelect: false,
                data4: [
                    {
                        value: 'beijing',
                        label: '北京',
                        children: [],
                        loading: false
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州',
                        children: [],
                        loading:false
                    }
                ]
            }
        },
        methods: {
            loadData (item, callback) {
                item.loading = true;
                setTimeout(() => {
                    if (item.value === 'beijing') {
                        item.children = [
                            {
                                value: 'talkingdata',
                                label: 'TalkingData'
                            },
                            {
                                value: 'baidu',
                                label: '百度'
                            },
                            {
                                value: 'sina',
                                label: '新浪'
                            }
                        ];
                    } else if (item.value === 'hangzhou') {
                        item.children = [
                            {
                                value: 'ali',
                                label: '阿里巴巴'
                            },
                            {
                                value: '163',
                                label: '网易'
                            }
                        ];
                    }
                    item.loading = false;
                    callback();
                }, 1000);
            },
            handleChangeOnSelect (value) {
              this.changeOnSelect = value
            }
        }
    }

var Component = Vue.extend(Main)
new Component().$mount('#app')