vue组件v-select下拉多选框

v-select下拉多选框

先看看最终实现效果图

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

1.需要的包文件

 

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

初始化的值和传送数据都在roleList里面，解析完再根据业务要求传给后台

参考运行代码：点击运行