简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  요소 UI 계단식 선택기는 계단식 개체를 어떻게 얻나요?

요소 UI 계단식 선택기는 계단식 개체를 어떻게 얻나요?

php中世界最好的语言
php中世界最好的语言원래의
2018-03-12 11:31:505044검색

이번에는 Element UI 계단식 선택기가 계단식 객체를 얻는 방법을 보여 드리겠습니다. Element UI 계단식 선택기가 계단식 객체를 얻기 위한 주의 사항은 다음과 같습니다.

요소 UI 계단식 선택기는 계단식 개체를 어떻게 얻나요?

코드:

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;
        });
    }

전체 예:

<!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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

관련 읽기:

nodejs http 모듈을 사용하여 업로드 이미지 인터페이스 테스트 클라이언트를 작성하는 방법

python3이 qq 사서함을 통해 이메일을 보내는 방법

위 내용은 요소 UI 계단식 선택기는 계단식 개체를 어떻게 얻나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：요소 UI에 대한 사용자 정의 양식 유효성 검사 플러그인 사용다음 기사：요소 UI에 대한 사용자 정의 양식 유효성 검사 플러그인 사용

관련 기사

더보기