Element UI级联选择器怎样获取级联对象-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Element UI级联选择器怎样获取级联对象

php中世界最好的语言

Mar 12, 2018 am 11:31 AM

element objek pemilih

这次给大家带来Element UI级联选择器怎样获取级联对象，Element 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;
        });
    }

Salin selepas log masuk

完整示例:

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

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

4 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

4 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

1 bulan yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7697

Tutorial Java

1640

Tutorial CakePHP

1393

Tutorial Laravel

1287

Tutorial PHP

1229

Tunjukkan Lagi

Related knowledge

Bagaimana untuk mengubah suai elemen.gaya Nov 24, 2023 am 11:15 AM

Kaedah untuk elemen.gaya untuk mengubah suai elemen: 1. Ubah suai warna latar belakang elemen; 2. Ubah suai saiz fon elemen; Ubah suai penjajaran mendatar elemen. Pengenalan terperinci: 1. Ubah suai warna latar belakang elemen, sintaksnya ialah "document.getElementById("myElement").style.backgroundColor = "red";" 2. Ubah suai saiz fon elemen, dsb.

Bagaimana untuk menukar tatasusunan hasil pertanyaan MySQL kepada objek? Apr 29, 2024 pm 01:09 PM

Begini cara untuk menukar tatasusunan hasil pertanyaan MySQL kepada objek: Cipta tatasusunan objek kosong. Gelung melalui tatasusunan yang terhasil dan buat objek baharu untuk setiap baris. Gunakan gelung foreach untuk menetapkan pasangan nilai kunci setiap baris kepada sifat yang sepadan bagi objek baharu. Menambah objek baharu pada tatasusunan objek. Tutup sambungan pangkalan data.

Bagaimanakah fungsi PHP mengembalikan objek? Apr 10, 2024 pm 03:18 PM

Fungsi PHP boleh merangkum data ke dalam struktur tersuai dengan mengembalikan objek menggunakan pernyataan pulangan diikuti dengan contoh objek. Sintaks: functionget_object():object{}. Ini membolehkan mencipta objek dengan sifat dan kaedah tersuai dan memproses data dalam bentuk objek.

Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3 Nov 20, 2023 am 11:20 AM

Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3. Contoh kod khusus adalah seperti berikut: Kod HTML: <divid="container" ><divclass="item"&gt ;Elemen anak pertama</div><divclass="item"&

Apakah perbezaan antara tatasusunan dan objek dalam PHP? Apr 29, 2024 pm 02:39 PM

Dalam PHP, tatasusunan ialah urutan tersusun, dan elemen diakses mengikut indeks; Akses tatasusunan adalah melalui indeks, akses objek adalah melalui sifat/kaedah. Nilai tatasusunan diluluskan dan rujukan objek diluluskan.

Apakah yang perlu saya perhatikan apabila fungsi C++ mengembalikan objek? Apr 19, 2024 pm 12:15 PM

Dalam C++, terdapat tiga perkara yang perlu diperhatikan apabila fungsi mengembalikan objek: Kitaran hayat objek diuruskan oleh pemanggil untuk mengelakkan kebocoran memori. Elakkan penunjuk berjuntai dan pastikan objek kekal sah selepas fungsi kembali dengan memperuntukkan memori secara dinamik atau mengembalikan objek itu sendiri. Pengkompil boleh mengoptimumkan pembuatan salinan objek yang dikembalikan untuk meningkatkan prestasi, tetapi jika objek itu diluluskan oleh semantik nilai, tiada pembuatan salinan diperlukan.

Apakah objek Permintaan dalam PHP? Feb 27, 2024 pm 09:06 PM

Objek Permintaan dalam PHP ialah objek yang digunakan untuk mengendalikan permintaan HTTP yang dihantar oleh klien ke pelayan. Melalui objek Permintaan, kami boleh mendapatkan maklumat permintaan pelanggan, seperti kaedah permintaan, maklumat pengepala permintaan, parameter permintaan, dsb., untuk memproses dan membalas permintaan tersebut. Dalam PHP, anda boleh menggunakan pembolehubah global seperti $_REQUEST, $_GET, $_POST, dll. untuk mendapatkan maklumat yang diminta, tetapi pembolehubah ini bukan objek, tetapi tatasusunan. Untuk memproses maklumat permintaan dengan lebih fleksibel dan mudah, anda boleh

Analisis perbezaan antara timbunan dan timbunan dalam Java dan senario aplikasinya Feb 24, 2024 pm 11:12 PM

Perbezaan antara timbunan Java dan timbunan dan analisis senario aplikasi memerlukan contoh kod khusus Dalam program Java, timbunan dan timbunan ialah dua struktur data yang biasa digunakan, dan ia mengambil alih peranan dan fungsi yang berbeza dalam ingatan. Memahami perbezaan antara timbunan dan timbunan adalah penting untuk menulis program Java yang cekap. Mula-mula, mari kita lihat timbunan Java. Heap ialah kawasan yang digunakan untuk menyimpan objek Semua objek yang dicipta dalam program disimpan dalam timbunan. Timbunan adalah tempat memori diperuntukkan dan dikeluarkan secara dinamik semasa program berjalan Ia tidak tertakluk kepada sebarang sekatan dan boleh secara automatik

See all articles

Element UI级联选择器怎样获取级联对象

Alat AI Hot

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Artikel Panas

Alat panas

Notepad++7.3.1

SublimeText3 versi Cina

Hantar Studio 13.0.1

Dreamweaver CS6

SublimeText3 versi Mac

Topik panas