動態增長select框(elementUI 框架)

時間 2019-11-15
標籤動態增長 select elementui 框架简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>演示動態增長select框(elementUI 框架)</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <style type="text/css">
            @import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css");
        </style>
    </head>
    <body>

        <div id="app">
            <!-- 帶多選的 select -->
            <el-select v-model="value5" multiple placeholder="請選擇">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            
            <!-- 帶清除的 select -->
            <el-select v-model="value5" clearable placeholder="請選擇">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            
            <!-- 帶計數的 select -->
            <el-select v-model="value11" multiple collapse-tags style="margin-left: 20px;" placeholder="請選擇">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            
            <br/>
            <hr style="height: 20px; color: aqua; background-color: aqua;" />
            
            <el-form>
                <el-form-item v-for="(it, index) in list" :key="index">
                    <el-select v-model="oneId[index]" placeholder="請選擇" @change="saveList($event, index)">
                        <el-option v-for="item in array" :key="item.id" :label="item.name" :value="item.id" >
                        </el-option>
                    </el-select>
                    
                    <el-button  @click="addItem" type="primary">增長</el-button>
                    <el-button  @click="removeItem(it, index)" type="danger">刪除</el-button>
                </el-form-item>
                
                <el-button type="success" @click="submit">提交</el-button>
            </el-form>
            
        </div>
    </body>

    <script>
        var vue = new Vue({
                    el: '#app',
                    data() {
                        return {
                            options: [
                                    {value: '選項1',label: '黃金糕'}, {value: '選項2',label: '雙皮奶'}, 
                                    {value: '選項3',label: '蚵仔煎'}, {value: '選項4',label: '龍鬚麪'}, 
                                    {value: '選項5',label: '北京烤鴨'},
                                ],
                            value5: [],
                            value11: [],
                            oneId: [],
                            array:[
                                    {id: '1',name: '黃金糕'}, 
                                    {id: '2',name: '雙皮奶'}, 
                                    {id: '3',name: '蚵仔煎'}, 
                                    {id: '4',name: '龍鬚麪'}, 
                                    {id: '5',name: '北京烤鴨'}
                                ],
                            list:[{"oneId":''}],
                            selectedList:[], // 存儲每次 option 選中的 集合
                        }
                    },
                    methods:{
                        addItem(){
                            // 1。這裏爲何改變list的大小就能實現動態增長呢？由於 el-form-item 遍歷的是 list,list 中的每一項都是一個 el-form-item
                            // 也就是說由於剛開始 list:[{"oneId":''}] 中,只有一個對象,因此纔會只出現一個 el-form-item
                            // 不信能夠本身在初始化時 list 中多加入幾個對象進行嘗試(必定要理解，這裏 list 集合的大小與 el-form-item 之間的關係)
                            // 二、第二個問題:el-form-item 是動態增長了,可是若是 el-select 那裏寫的是 v-model="oneId" 呢？會發生什麼？結果你會發現,只要增長一項 el-form-item ,每一項綁定的值都是你所選中的那一個值.爲何呢？由於每一項的 el-option的 :value 值都綁定在 el-select 的 v-model 上,但這是一個全局惟一值,當下一個 el-form-item 產生後,它裏面的 el-select 中綁定的 v-model 仍是那個 oneId 的值,所以纔會出現這樣的問題.好了,咱們既然找到了緣由,那就要來解決一下了,怎麼解決呢？很簡單:由於我前面說了,每個 list 的遍歷對象,都是一項 el-form-item,即 el-form-item 項數是和 list 的下標(裏面存的對象的索引下標)相關聯的,而這個下標,在每個 el-form-item 中確定是不同的,所以咱們只須要將 oneId 與這個 下標(即此處的 index) 發生關係便可,所以咱們這裏將 oneId 聲明爲了一個數組,當你每選中一個 option 時,都將這個 option 的value放入 oneId[當前el-form-item項數下標] 數組中
                            
                            this.list.push({"oneId": ''});
                        },
                        
                        removeItem(it, index){ // 刪除時,咱們帶兩個參數,這個 it 可用可不用,由於我當時只是想看到刪除的這個對象的信息,故而帶上了; index 是 list 中該對象對應的下標,也是 el-form-item 的項數
                            // 根據這個 index 下標刪除 list 中 的該對象
                            if(index != 0){
                                this.list.splice(index, 1);
                            }    
                        },
                        
                        saveList(event, index){ // 當每選一個 option 時,咱們須要將這個 選中的 oneId 放入 對應的 list 中便可,最後都選中完後,咱們只要獲取這個 list,便可拿到全部的數據
                            this.list[index].oneId = event;
                        },
                        
                        submit(){ // 這裏咱們打印一下 最後的 list,確保咱們都拿到數據了
                            alert(`最終的數據: ${JSON.stringify(this.list)}`);
                        },
                    },
        });
    </script>

</html>
聲明

原創手敲不易，轉載請註明出處，謝謝。我是拉丁小毛，歡迎你們關注我哦，一塊兒交流，共同進步。有問題能夠 郵我哦(util.you.com@gmail.com)
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。