v-select下拉多选框

先看看最终实现效果图

是vue的一个组件。用于下拉框多选的情况

1.需要的包文件

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select@2.0.0/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里面，解析完再根据业务要求传给后台

参考运行代码：点击运行