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

╰+攻爆jí腚メ 2022-01-23 01:53 510阅读 0赞

原文章链接地址：[https://codepen.io/02954/pen/MzMMYw][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')

[https_codepen.io_02954_pen_MzMMYw]: https://codepen.io/02954/pen/MzMMYw

发表评论取消回复

表情：

评论列表（有 0 条评论，510人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery动态加载select选项

$("\selectid").get(0).options.add(new Option(json数据)) 转载于:https://www.cnblogs.com/Dylan

不念不忘少年蓝@/ 2023年08月17日 16:30/ 0 赞/ 99 阅读

相关设置Cascader级联选择器默认值

// this.$set(this.teamArea,0,this.team.province) // this.$set(this.teamArea,1,th

谁借莪１个温暖的怀抱￠/ 2023年03月06日 03:51/ 0 赞/ 4 阅读

相关 element el-cascader动态加载数据（多级联动，落地方案）

> 前言最近需要用到element ui的这个插件做地区的四级联动，但是碰了一些问题：官网的说明太泛泛然，不易看懂网上的教程乱七八糟，代码一堆一堆的

￡神魔★判官ぃ/ 2023年01月21日 02:09/ 0 赞/ 631 阅读

相关 element ui cascader 动态加载回显问题解决方法

props: { lazy: true, async lazyLoad(node, resolve) { } } ![在这

￡神魔★判官ぃ/ 2022年12月27日 01:55/ 0 赞/ 119 阅读

相关 vue+element cascader联选择器三级类目动态加载

当选中某一级时，动态加载该级下的选项。 html代码框里面只显示三级类目删除:show-all-levels=“false” 就会显示全部路径 <el-for

浅浅的花香味﹌/ 2022年12月25日 09:55/ 0 赞/ 303 阅读

相关 iview table高度动态设置

iview table高度动态设置在使用iview table表格组件的时候，由于我的屏幕分辨率比较大，在自己pc机上设置的固定高度很适合，在测试（tes

- 日理万妓/ 2022年06月02日 02:24/ 0 赞/ 266 阅读

相关 antd级联框Cascader动态加载的用法

一，官方文档：[https://ant.design/components/cascader-cn/\header][https_ant.design_components_c

朱雀/ 2022年04月15日 00:56/ 0 赞/ 1573 阅读

相关 el-cascade设置默认值遇到的坑！

[https://blog.csdn.net/dadiyang/article/details/80144194?utm\_source=blogxgwz8][https_bl

梦里梦外;/ 2022年04月11日 11:17/ 0 赞/ 210 阅读

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

原文章链接地址：[https://codepen.io/02954/pen/MzMMYw][https_codepen.io_02954_pen_MzMMYw] HTML

╰+攻爆jí腚メ/ 2022年01月23日 01:53/ 0 赞/ 511 阅读

相关【easyui】comboTree加载数据并设置默认值

comboTree 可以在onLoadSuccess方法中加载此方法 //本方法可以设置默认值，默认值既可以是树节点中存在的，也可以是不存在的 //comb

红太狼/ 2021年11月11日 16:08/ 0 赞/ 880 阅读