Dynamic addition of select box (elementUI framework)

Time:2019-10-9
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Demonstration dynamic addition of select box (elementUI framework)</title>
        <script></script>
        <script></script>
        <style type="text/css">
            @import url("//unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css");
        </style>
    </head>
    <body>

        <div id="app">
            <! - Select with multiple choices
            <el-select v-model= "value5" multiple placeholder= "please choose">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            
            <! - Select with Clearance
            <el-select v-model= "value5" clearable placeholder= "please choose">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            
            <! - Select with counts - >
            <el-select v-model= "value11" multiple collapse-tags style= "margin-left: 20px;" placeholder= "please choose">
                <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= "Please select"@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"> increase </el-button>
                    <[email protected]= "removeItem (it, index)" type= "danger">delete </el-button>
                </el-form-item>
                
                <el-button type= "success"@click= "submit">submit </el-button>
            </el-form>
            
        </div>
    </body>

    <script>
        var vue = new Vue({
                    el: '#app',
                    data() {
                        return {
                            options: [
                                    {value:'option 1', label:'Golden cake'}, {value:'option 2', label:'double skin milk'}, 
                                    {value:'option 3', label:'oyster fry'}, {value:'option 4', label:'dragon beard noodles'}, 
                                    {value:'Option 5', label:'Beijing Roast Duck'},
                                ],
                            value5: [],
                            value11: [],
                            oneId: [],
                            array:[
                                    {id:'1', name:'Golden Cake'}, 
                                    {id:'2', name:'double-skinned milk'}, 
                                    {id:'3', name:'oyster fry'}, 
                                    {id:'4', name:'Dragon's whisker'}, 
                                    {id:'5', name:'Beijing Roast Duck'}
                                ],
                            list:[{"oneId":''}],
                            Selected List:[], // Stores the collection selected for each option
                        }
                    },
                    methods:{
                        addItem(){
                            // 1. Why can dynamic increase be achieved by changing the size of the list? Because el-form-item traverses a list, each item in the list is an el-form-item.
                            // That is to say, because there is only one object in the initial list:[{"oneId":'}], only one el-form-item appears.
                            // If you don't believe it, you can try adding several more objects to the list when you initialize it. (Understand the relationship between the size of the list set and el-form-item here.)
                            // 2. Second question: el-form-item is dynamic, but what if el-select says v-model= "oneId"? What will happen? As a result, you will find that by adding an el-form-item, the value of each binding is the value you choose. Why? Because the value of each item's el-option is bound to the V-model of el-selection, but this is a global unique value. When the next el-form-item is generated, the V-model bound in the el-selection is the value of the oneId, so this problem arises. Okay, now that we have found the reason, how can we solve it? Simple: Because as I said earlier, every list traversal object is an el-form-item, that is, the number of el-form-item items is associated with the list's subscript (the index subscript of the object in it), which must be different in every el-form-item, so we just need to relate oneId to this subscript (the index here), so we can Here you declare oneId as an array, and when you select an option, you put the value of that option into the oneId [current el-form-item subscript] array
                            
                            this.list.push({"oneId": ''});
                        },
                        
                        When removeItem (it, index) {// deletes, we take two parameters, which is useless because I only wanted to see the information of the deleted object, so I took it with me; index is the subscript of the object in the list, and is also the number of items of el-form-item.
                            // Delete the object in the list based on the index subscript
                            if(index != 0){
                                this.list.splice(index, 1);
                            }    
                        },
                        
                        SaveList (event, index) {// When each option is selected, we need to put the selected oneId into the corresponding list. After the final selection, we just need to get the list, and then we can get all the data.
                            this.list[index].oneId = event;
                        },
                        
                        Submit (){// Here we print out the final list to make sure we all get the data.
                            Alert (`final data: ${JSON. stringify (this. list)}');
                        },
                    },
        });
    </script>

</html>

statement

I only write my original content, all the content is my own hand knock, practice, this is also my actual project to use, so I knocked once.If you want to reprint it, please indicate the source. Thank you.