Comment le sélecteur en cascade Element UI obtient-il l'objet en cascade ?-js tutoriel-php.cn

Comment le sélecteur en cascade Element UI obtient-il l'objet en cascade ?

php中世界最好的语言

Libérer： 2018-03-12 11:31:50

original

5138 Les gens l'ont consulté

Cette fois, je vais vous montrer comment le sélecteur en cascade Element UI obtient l'objet en cascade. Quelles sont les précautions pour que le sélecteur en cascade Element UI obtienne l'objet en cascade. jetez un oeil.

Comment le sélecteur en cascade Element UI obtient-il lobjet en cascade ?

Code :

getCascaderObj = function(val, opt){        return val.map(function (value, index, array) {            for (var itm of opt) {                if (itm.value == value) { opt = itm.children; return itm; }
            }            return null;
        });
    }

Copier après la connexion

Exemple complet :

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <style>
    </style></head><body>
    <div id="app">
        <el-cascader v-model="val" placeholder="试试搜索：指南" :options="options" filterable @change="handleItemChange"></el-cascader>
        <div v-for="i in vals">
            label:{{i.label}} - value{{i.value}}        </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script> 
        function getCascaderObj(val,opt) {            return val.map(function (value, index, array) {                for (var itm of opt) {                    if (itm.value == value) { opt = itm.children; return itm; }
                }                return null;
            });
        }    </script>
    <script>
        var app = new Vue({
            el: &#39;#app&#39;,
            data: {
                vals:[],
                val: [],
                options: [{
                    value: &#39;zhinan&#39;,
                    label: &#39;指南&#39;,
                    children: [{
                        value: &#39;shejiyuanze&#39;,
                        label: &#39;设计原则&#39;,
                        children: [{
                            value: &#39;yizhi&#39;,
                            label: &#39;一致&#39;
                        }, {
                            value: &#39;fankui&#39;,
                            label: &#39;反馈&#39;
                        }, {
                            value: &#39;xiaolv&#39;,
                            label: &#39;效率&#39;
                        }, {
                            value: &#39;kekong&#39;,
                            label: &#39;可控&#39;
                        }]
                    }, {
                        value: &#39;daohang&#39;,
                        label: &#39;导航&#39;,
                        children: [{
                            value: &#39;cexiangdaohang&#39;,
                            label: &#39;侧向导航&#39;
                        }, {
                            value: &#39;dingbudaohang&#39;,
                            label: &#39;顶部导航&#39;
                        }]
                    }]
                }, {
                    value: &#39;zujian&#39;,
                    label: &#39;组件&#39;,
                    children: [{
                        value: &#39;basic&#39;,
                        label: &#39;Basic&#39;,
                        children: [{
                            value: &#39;layout&#39;,
                            label: &#39;Layout 布局&#39;
                        }, {
                            value: &#39;color&#39;,
                            label: &#39;Color 色彩&#39;
                        }, {
                            value: &#39;typography&#39;,
                            label: &#39;Typography 字体&#39;
                        }, {
                            value: &#39;icon&#39;,
                            label: &#39;Icon 图标&#39;
                        }, {
                            value: &#39;button&#39;,
                            label: &#39;Button 按钮&#39;
                        }]
                    }, {
                        value: &#39;form&#39;,
                        label: &#39;Form&#39;,
                        children: [{
                            value: &#39;radio&#39;,
                            label: &#39;Radio 单选框&#39;
                        }, {
                            value: &#39;checkbox&#39;,
                            label: &#39;Checkbox 多选框&#39;
                        }, {
                            value: &#39;input&#39;,
                            label: &#39;Input 输入框&#39;
                        }, {
                            value: &#39;input-number&#39;,
                            label: &#39;InputNumber 计数器&#39;
                        }, {
                            value: &#39;select&#39;,
                            label: &#39;Select 选择器&#39;
                        }, {
                            value: &#39;cascader&#39;,
                            label: &#39;Cascader 级联选择器&#39;
                        }, {
                            value: &#39;switch&#39;,
                            label: &#39;Switch 开关&#39;
                        }, {
                            value: &#39;slider&#39;,
                            label: &#39;Slider 滑块&#39;
                        }, {
                            value: &#39;time-picker&#39;,
                            label: &#39;TimePicker 时间选择器&#39;
                        }, {
                            value: &#39;date-picker&#39;,
                            label: &#39;DatePicker 日期选择器&#39;
                        }, {
                            value: &#39;datetime-picker&#39;,
                            label: &#39;DateTimePicker 日期时间选择器&#39;
                        }, {
                            value: &#39;upload&#39;,
                            label: &#39;Upload 上传&#39;
                        }, {
                            value: &#39;rate&#39;,
                            label: &#39;Rate 评分&#39;
                        }, {
                            value: &#39;form&#39;,
                            label: &#39;Form 表单&#39;
                        }]
                    }, {
                        value: &#39;data&#39;,
                        label: &#39;Data&#39;,
                        children: [{
                            value: &#39;table&#39;,
                            label: &#39;Table 表格&#39;
                        }, {
                            value: &#39;tag&#39;,
                            label: &#39;Tag 标签&#39;
                        }, {
                            value: &#39;progress&#39;,
                            label: &#39;Progress 进度条&#39;
                        }, {
                            value: &#39;tree&#39;,
                            label: &#39;Tree 树形控件&#39;
                        }, {
                            value: &#39;pagination&#39;,
                            label: &#39;Pagination 分页&#39;
                        }, {
                            value: &#39;badge&#39;,
                            label: &#39;Badge 标记&#39;
                        }]
                    }, {
                        value: &#39;notice&#39;,
                        label: &#39;Notice&#39;,
                        children: [{
                            value: &#39;alert&#39;,
                            label: &#39;Alert 警告&#39;
                        }, {
                            value: &#39;loading&#39;,
                            label: &#39;Loading 加载&#39;
                        }, {
                            value: &#39;message&#39;,
                            label: &#39;Message 消息提示&#39;
                        }, {
                            value: &#39;message-box&#39;,
                            label: &#39;MessageBox 弹框&#39;
                        }, {
                            value: &#39;notification&#39;,
                            label: &#39;Notification 通知&#39;
                        }]
                    }, {
                        value: &#39;navigation&#39;,
                        label: &#39;Navigation&#39;,
                        children: [{
                            value: &#39;menu&#39;,
                            label: &#39;NavMenu 导航菜单&#39;
                        }, {
                            value: &#39;tabs&#39;,
                            label: &#39;Tabs 标签页&#39;
                        }, {
                            value: &#39;breadcrumb&#39;,
                            label: &#39;Breadcrumb 面包屑&#39;
                        }, {
                            value: &#39;dropdown&#39;,
                            label: &#39;Dropdown 下拉菜单&#39;
                        }, {
                            value: &#39;steps&#39;,
                            label: &#39;Steps 步骤条&#39;
                        }]
                    }, {
                        value: &#39;others&#39;,
                        label: &#39;Others&#39;,
                        children: [{
                            value: &#39;dialog&#39;,
                            label: &#39;Dialog 对话框&#39;
                        }, {
                            value: &#39;tooltip&#39;,
                            label: &#39;Tooltip 文字提示&#39;
                        }, {
                            value: &#39;popover&#39;,
                            label: &#39;Popover 弹出框&#39;
                        }, {
                            value: &#39;card&#39;,
                            label: &#39;Card 卡片&#39;
                        }, {
                            value: &#39;carousel&#39;,
                            label: &#39;Carousel 走马灯&#39;
                        }, {
                            value: &#39;collapse&#39;,
                            label: &#39;Collapse 折叠面板&#39;
                        }]
                    }]
                }, {
                    value: &#39;ziyuan&#39;,
                    label: &#39;资源&#39;,
                    children: [{
                        value: &#39;axure&#39;,
                        label: &#39;Axure Components&#39;
                    }, {
                        value: &#39;sketch&#39;,
                        label: &#39;Sketch Templates&#39;
                    }, {
                        value: &#39;jiaohu&#39;,
                        label: &#39;组件交互文档&#39;
                    }]
                }]
            },
            methods: {
                handleItemChange() {                    this.vals=getCascaderObj(this.val, this.options);
                }
            }
        })    </script></body> </html>

Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment nodejs utilise le module http pour écrire un client de test d'interface d'image de téléchargement

Comment utiliser python3 via la boîte aux lettres qq Envoyer un e-mail

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!