element-ui三级树形控件与后台衔接问题

环境

此问题是基于Vue-cli项目的element-ui技术中树形控件的问题

出现的问题

点击一级分类的权限按钮会选中一级分类下包括所有二级分类,所有三级分类的权限,然后点击确定按钮,之后查看数据库并刷新浏览器页面,我们发现权限已经分配,页面也可以正常显示.

打开分配权限窗口–>点击需要赋予的权限(三级分类下的个别权限)–>点击确定按钮,完成操作后查看数据库发现,权限已经赋予了,但是刷新浏览器页面后我们再次点击分配权限窗口发现,该一级分类下的所有二级分类,和所有三级分类都被勾选了,前后端数据不一致.
接下来为大家提供解决方案

第一步

在树形控件中添加check-strictly属性,属性前加冒号,则值就可绑定data中的变量

<div>
	<el-tree
	    :props="defaultProps"
	    :data="permissions"
	    show-checkbox
	    node-key="menuId"
	    :default-checked-keys="rolePermissions"
	    ref="tree"
	    <!--   此属性返回值为boolean类型     -->
	    <!--   作用: 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false     -->
	    :check-strictly="systemNodeFlag"
	  >
	</el-tree>
</div>
<span slot="footer" class="dialog-footer">
  <el-button @click="permissionDialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="authorize">确 定</el-button>
</span>

第二步

data中定义该变量

data(){
    return {
      permissionDialogVisible:false,
      permissions:[],
      rolePermissions:[],
      systemNodeFlag:false,
      roleId:null,
      defaultProps: {
        children: 'menuList',
        label: 'name'
      }
    }
  },

第三步

发出ajax请求得到返回的数组(数组中存用户已有权限的id值),再给树形控件节点赋值之前先设置systemNodeFlag属性为true,然后设置等页面渲染后再给节点赋值,赋值完成后不要忘了设置systemNodeFlag属性为false

openPermissionDialog(roleId){
      this.roleId=roleId;
      this.permissionDialogVisible= true;
      this.axios.get("/tree")
        .then(resp=>{
          this.permissions = resp.data.data;
          return this.axios.get(`/resource/${this.roleId}`);
        }).then(resp=>{
        this.rolePermissions = resp.data.data.map((item)=>{return item.resourceId});
        this.systemNodeFlag = true  //重点：给数节点赋值之前 先设置为true
        this.$nextTick(() => {//等页面渲染后，再做的处理。
          this.$refs.tree.setCheckedKeys(this.rolePermissions) //给树节点赋值
          this.systemNodeFlag = false //重点： 赋值完成后 设置为false
        })
      })
    }

然后这个前后端数据不一致的问题就结局了,第一次写博客,如有不足之处请多多包涵