用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("请勾选权限后再更新！"); } },