如何使用Link,Radio,Checkbox,Select,Cascader組件

這篇文章主要介紹“如何使用Link,Radio,Checkbox,Select,Cascader組件”，在日常操作中，相信很多人在如何使用Link,Radio,Checkbox,Select,Cascader組件問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何使用Link,Radio,Checkbox,Select,Cascader組件”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1.Link組件動(dòng)態(tài)綁定URL

<div id="home" >
    <el-row :gutter="40">
        <el-col :span="16">
            <el-form label-width="100px">
                <el-link :href="href" target="_blank">默認(rèn)鏈接</el-link>
            </el-form>
        </el-col>
    </el-row>
</div>

對(duì)應(yīng)的js代碼

<script type="text/javascript">
    new Vue({
        el: '#home',
        data: {
            href: ''
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.href = "https://www.baidu.com/"
            }
        }
    })
</script>

2.Radio 用法

<el-radio-group v-model="addType" @change="radioChange">
    <el-radio :label="1" >備選項(xiàng)1</el-radio>
    <el-radio :label="2" >備選項(xiàng)2</el-radio>
    <el-radio :label="3" >備選項(xiàng)3</el-radio>
</el-radio-group>

對(duì)應(yīng)的js代碼

<script type="text/javascript">
    new Vue({
        el: '#home',
        data: {
            addType: null       # 必須聲明綁定的值，否則頁(yè)面無(wú)法渲染
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {

            },
            radioChange() {
                console.log(this.addType)
            }
        }
    })
</script>

當(dāng)選項(xiàng)被選中時(shí)，會(huì)調(diào)用radioChange方法。

3.Checkbox用法

方式一：

<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

對(duì)應(yīng)的js代碼

<script type="text/javascript">
    new Vue({
        el: '#home',
        data: {
            num: ''
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {

            },
            checkChange() {
                console.log(this.num)
            }
        }
    })
</script>

當(dāng)標(biāo)簽中的值改變時(shí)，會(huì)調(diào)用handleChange方法。

方式二：

<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
<el-button type="success" @click="getSearch">搜索</el-button>

對(duì)應(yīng)的js代碼

<script type="text/javascript">
    new Vue({
        el: '#home',
        data: {
            num: '',
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {

            },
            getSearch() {
                console.log(this.num)
            }
        }
    })
</script>

當(dāng)搜索按鈕被點(diǎn)擊時(shí)，會(huì)觸發(fā)getSearch方法，獲取到num的值。

4.Select 用法

方式一：

el-option中只需要聲明key和value的值即可

<el-select v-model="value" placeholder="請(qǐng)選擇">
    <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
</el-select>
<el-button type="success" @click="getSearch">搜索</el-button>

對(duì)應(yīng)的js代碼

<script type="text/javascript">
    new Vue({
        el: '#home',
        data: {
            options: [],
            value: ''
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.options = [
                    {
                        value: '黃金糕',
                        label: '黃金糕'
                    }, {
                        value: '雙皮奶',
                        label: '雙皮奶'
                    }, {
                        value: '蚵仔煎',
                        label: '蚵仔煎'
                    }, {
                        value: '龍須面',
                        label: '龍須面'
                    }, {
                        value: '北京烤鴨',
                        label: '北京烤鴨'
                    }
                ]
            },
            getSearch() {
                console.log(this.value)
            }
        }
    })
</script>

可以先聲明options為空數(shù)組，然后在init方法中為options數(shù)組賦值(可以異步請(qǐng)求后端數(shù)據(jù)，將后端響應(yīng)數(shù)據(jù)賦值)

當(dāng)搜索按鈕被點(diǎn)擊時(shí)，會(huì)觸發(fā)getSearch方法，獲取到el-select被選中的值。

方式二：

<el-select v-model="value" placeholder="請(qǐng)選擇" @change="selectChange">
    <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
</el-select>

對(duì)應(yīng)的js代碼

<script type="text/javascript">
    new Vue({
        el: '#home',
        data: {
            options: [],
            value: ''
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.options = [
                    {
                        value: '黃金糕',
                        label: '黃金糕'
                    }, {
                        value: '雙皮奶',
                        label: '雙皮奶'
                    }, {
                        value: '蚵仔煎',
                        label: '蚵仔煎'
                    }, {
                        value: '龍須面',
                        label: '龍須面'
                    }, {
                        value: '北京烤鴨',
                        label: '北京烤鴨'
                    }
                ]
            },
            selectChange() {
                console.log(this.value)
            }
        }
    })
</script>

當(dāng)select選項(xiàng)改變時(shí)，會(huì)調(diào)用selectChange方法。

如需要在下拉菜單中選中多個(gè)值中，可以在el-select標(biāo)簽中加入multiple選項(xiàng)，多選中標(biāo)簽的結(jié)果是一個(gè)數(shù)組。

<el-select v-model="value" multiple placeholder="請(qǐng)選擇" @change="selectChange">
    <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
</el-select>

7.Cascader 級(jí)聯(lián)菜單組件用法

<el-cascader v-model="value" :options="options" @change="handleChange" ></el-cascader>

對(duì)應(yīng)的js代碼

<script type="text/javascript">
    new Vue({
        el: '#home',
        data: {
            options: [],
            value: ''
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.options = [
                    {
                        value: 'zhinan', label: '指南',
                        children: [
                            {
                                value: 'shejiyuanze', label: '設(shè)計(jì)原則',
                                children: [
                                    {value: 'yizhi', label: '一致'},
                                    {value: 'fankui', label: '反饋'},
                                    {value: 'xiaolv', label: '效率'},
                                    {value: 'kekong', label: '可控'}
                                ]
                            }, {
                                value: 'daohang', label: '導(dǎo)航',
                                children: [
                                    {value: 'cexiangdaohang', label: '側(cè)向?qū)Ш?#39;},
                                    {value: 'dingbudaohang', label: '頂部導(dǎo)航'}
                                ]
                            }
                        ]
                    }, {
                        value: 'zujian', label: '組件',
                        children: [
                            {
                                value: 'basic', label: 'Basic',
                                children: [
                                    {value: 'layout', label: 'Layout 布局'},
                                    {value: 'color', label: 'Color 色彩'},
                                    {value: 'typography', label: 'Typography 字體'},
                                    {value: 'icon', label: 'Icon 圖標(biāo)'},
                                    {value: 'button', label: 'Button 按鈕'}
                                ]
                            }, {
                                value: 'form', label: 'Form',
                                children: [
                                    {value: 'radio', label: 'Radio 單選框'},
                                    {value: 'checkbox', label: 'Checkbox 多選框'},
                                    {value: 'input', label: 'Input 輸入框'},
                                    {value: 'input-number', label: 'InputNumber 計(jì)數(shù)器'},
                                    {value: 'select', label: 'Select 選擇器'},
                                    {value: 'cascader', label: 'Cascader 級(jí)聯(lián)選擇器'},
                                    {value: 'switch', label: 'Switch 開(kāi)關(guān)'},
                                    {value: 'slider', label: 'Slider 滑塊'},
                                    {value: 'time-picker', label: 'TimePicker 時(shí)間選擇器'},
                                    {value: 'date-picker', label: 'DatePicker 日期選擇器'},
                                    {value: 'datetime-picker', label: 'DateTimePicker 日期時(shí)間選擇器'},
                                    {value: 'upload', label: 'Upload 上傳'},
                                    {value: 'rate', label: 'Rate 評(píng)分'},
                                    {value: 'form', label: 'Form 表單'}
                                ]
                            }, {
                                value: 'data', label: 'Data',
                                children: [
                                    {value: 'table', label: 'Table 表格'},
                                    {value: 'tag', label: 'Tag 標(biāo)簽'},
                                    {value: 'progress', label: 'Progress 進(jìn)度條'},
                                    {value: 'tree', label: 'Tree 樹形控件'},
                                    {value: 'pagination', label: 'Pagination 分頁(yè)'},
                                    {value: 'badge', label: 'Badge 標(biāo)記'}
                                ]
                            }, {
                                value: 'notice', label: 'Notice',
                                children: [
                                    {value: 'alert', label: 'Alert 警告'},
                                    {value: 'loading', label: 'Loading 加載'},
                                    {value: 'message', label: 'Message 消息提示'},
                                    {value: 'message-box', label: 'MessageBox 彈框'},
                                    {value: 'notification', label: 'Notification 通知'}
                                ]
                            }, {
                                value: 'navigation', label: 'Navigation',
                                children: [
                                    {value: 'menu', label: 'NavMenu 導(dǎo)航菜單'},
                                    {value: 'tabs', label: 'Tabs 標(biāo)簽頁(yè)'},
                                    {value: 'breadcrumb', label: 'Breadcrumb 面包屑'},
                                    {value: 'dropdown', label: 'Dropdown 下拉菜單'},
                                    {value: 'steps', label: 'Steps 步驟條'}
                                ]
                            }, {
                                value: 'others', label: 'Others',
                                children: [
                                    {value: 'dialog', label: 'Dialog 對(duì)話框'},
                                    {value: 'tooltip', label: 'Tooltip 文字提示'},
                                    {value: 'popover', label: 'Popover 彈出框'},
                                    {value: 'card', label: 'Card 卡片'},
                                    {value: 'carousel', label: 'Carousel 走馬燈'},
                                    {value: 'collapse', label: 'Collapse 折疊面板'}
                                ]
                            }
                        ]
                    },
                    {
                        value: 'ziyuan', label: '資源',
                        children: [
                            {value: 'axure', label: 'Axure Components'},
                            {value: 'sketch', label: 'Sketch Templates'},
                            {value: 'jiaohu', label: '組件交互文檔'}
                        ]
                    }
                ]
            },
            getSearch() {
                console.log(this.value)
            }
        }
    })
</script>

可以先聲明options為空數(shù)組，然后在init方法中為options數(shù)組賦值(可以異步請(qǐng)求后端數(shù)據(jù)，將后端響應(yīng)數(shù)據(jù)賦值)

需要選中值就觸發(fā)方法時(shí)，可以加@change="handleChange"選項(xiàng)來(lái)綁定觸發(fā)方法

需指定長(zhǎng)度時(shí)，可以加選項(xiàng)

其選中結(jié)果為一個(gè)數(shù)組類型，可以直接加索引獲取選中的值

到此，關(guān)于“如何使用Link,Radio,Checkbox,Select,Cascader組件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！