vue組件v-select下拉多選框

v-select下拉多選框

先看看最終實現效果圖

是vue的一個組件。用於下拉框多選的情況

1.需要的包文件

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  

2.準備數據

var vm = new Vue({
    el: '#rrapp',
    updateTrue: false,
    data: {
        options: [],
        roleList: [],
        user: {
          
            roleId: '',
            roleName: '',
           
        }
    })

 

如果是靜態的，則直接把數據寫到options裏面，如果是動態獲取，則請求url後填充數據

  //渲染角色多選下拉框數據
            $.ajax({
                    type: "post",
                    url: baseURL
                    async: false,
                    dataType: "json",
                    success: function (r) {
                        //請求成功。填充數據
                        for (var i = 0; i < r.list.length; i++) {
                            var json = {"roleId": r.list[i].roleId, "roleName": r.list[i].roleName};
                            vm.options.push(json);
                        }
                        console.log(vm.options);
                    }
                }
            );

vue 的v-model標籤是進行雙向綁定，所以想要下拉多選框有默認的值，首先要綁定v-model，給指定的綁定元素數據

3.vue

<v-select placeholder="請選擇角色"
								  multiple
								  :options="options" label="roleName" :options-value="'roleId'"
								  :value.sync="roleList"
								  v-model="roleList"
						>
						</v-select>

初始化的值和傳送數據都在roleList裏面，解析完再根據業務要求傳給後臺

參考運行代碼：點擊運行