Vue+axios实现下拉框联动刷新

Vue+axios实现下拉框联动刷新

用v-model绑定、获取下拉框选中value
通过v-for，遍历部门列表/角色列表，动态展现option里的数据
通过’v-on’设置option的value
通过{{message}}设置option的text
即将迭代出的item中数据分别设置给option的value和text
通过select的@change调用方法，根据v-model获取选中值，调用接口，查询并刷新下一个下拉框的数据。

//本来想把这些列表参数都塞到一个对象里，中间调试的时候出bug了，先凑合用着好了。

下拉框页面：

<select v-model="selectGroup" @change="getRoles">
	<option value=-1>————请选择部门—————</option>
	<option :value="group.gid" v-for="group in groupList" >{{group.gname}}</option>
</select>
<select v-model="selectRole" @change="getPerms">
	<option value=-1>————请选择角色————</option>
	<option :value="role.rid" v-for="role in roleList" >{{role.rname}}</option>
</select>
<ul class="list-group list-group-flush">
	<li :value="perm.perm" v-for="perm in permsList">{{perm.pcontext}}</li>
</ul>

根据返回的数据，初始化下拉框和列表

        //获取用户权限
        getUserPerms:function(uid){
            //保存this
            let that = this;
            this.selectUser = uid;
            axios.get('/user/getPermsInfo/'+uid)
            .then(function (response) {
                that.userPermsUpdateInfo = response.data;
                that.groupList = that.userPermsUpdateInfo.groupTables;
                if (that.userPermsUpdateInfo.permTables.length == 0){
                    that.selectGroup = -1;
                    that.selectRole = -1;
                }else {
                    that.roleList = that.userPermsUpdateInfo.roleTables;
                    that.permsList = that.userPermsUpdateInfo.permTables;
                    that.selectGroup = that.userPermsUpdateInfo.gid;
                    that.selectRole = that.userPermsUpdateInfo.rid;
                }
                that.userPermsUpdateIsShow = true;
            },function (err) {
                console.log(err);
            })
        },

根据下拉框变化，刷新后面的下拉框和列表：

        //根据项目组id获取角色列表
        getRoles:function(){
            let that = this;
            // console.log("selectGroup：" + this.selectGroup);
            if (this.selectGroup > -1){
                axios.get('/role.do/'+this.selectGroup)
                    .then(function (response) {
                        // console.log(response.data);
                        that.roleList = response.data;
                        that.selectRole = -1;
                        // that.userPermsUpdateInfo.roleTables = response.data;
                    },function (err) {
                        console.log(err);
                    })
            }
        },
        //根据角色id获取权限列表
        getPerms:function(){
            let that = this;
            // console.log("selectRole：" + this.selectRole)
            if(this.selectRole > -1){
                axios.get('/perms.do/' + this.selectRole)
                    .then(function (response) {
                        // console.log(response.data);
                        that.permsList = response.data;
                        // that.userPermsUpdateInfo.permTables = response.data;
                    },function (err) {
                        console.log(err);
                    })
            }
        },

提交下拉框数据：

//更新用户权限
updateUserPerms:function(){
    if (this.selectGroup > -1 && this.selectRole > -1){
        let that = this;
        let dataInfo = new Object();
        dataInfo.gid = this.selectGroup;
        dataInfo.rid = this.selectRole;
        dataInfo.uid = this.selectUser;
        let data = "Objectparam=" + JSON.stringify(dataInfo);
        axios.post('/user/setPerms',data)
            .then(function (response) {
                // console.log(response.data);
                if(response.data != "" && response.data == "success"){
                    alert("权限更新成功！");
                    that.getUserListAll();
                    that.selectGroup = -1;
                    that.selectRole = -1;
                    that.permsList = [];
                }else {
                    alert("权限更新失败")
                }
                that.userPermsUpdateIsShow = false;
            },function (err) {
                console.log(err);
            })
    }else {
        alert("请勾选权限后再更新！");
    }
},