关于若依TREE树形控件

第一次使用树形控件，做个简单记录

1，页面显示部分

<div v-show="SiteAccountRelationship">
          <el-form-item label="title">
            <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'tree')">全选/全不选</el-checkbox>
            <el-tree
              ref="tree"
              node-key="userId"
              :data="roleList"
              :props="defaultProps"
              @check-change="checkChange"
              empty-text="加载中，请稍后"
              :show-checkbox="true"
            >
            </el-tree>
          </el-form-item>
</div>

1.1 树形控件的简单属性

 data 存放要显示的树形结构数据
 show-checkbox 显示复选框，默认为true，或者:show-checkbox = "true"
ref 可以this.$refs.DeviceGroupTree拿到此控件
node-key 给节点的编号，在显示该结构的复选框时，有默认选中的靠他
:props=“defaultProps”，在data中绑定子节点的名称(label)和子节点（children）
@check-change="checkChange" 绑定checkChange方法，当树结构改变的时候触发这个方法

empty-text="加载中，请稍后"  :data为空时的显示内容

2.数据定义

export default {
  name: "StationInfo",
  data() {
    return {
      // 角色表格数据，树形控件中显示的数据，显示的是roleList.userName
      roleList: [],
      //查询时便已经选好的user
      hasChoosenRole:[],
      //后选的user信息
      hasChoosenRoleNew:[],
      //是否全选
      deptNodeAll: false,
     

      //el-tree的数据显示，复选框后面显示的是字段为userName的数据
      defaultProps: {
        children: 'children',
        label: 'userName'
      },
}}

3.方法

/** 先获取全部的角色role信息*/
      listCommonUser().then(response => {
          this.roleList = response.data;
        });

 // 表单重置
    reset() {
      if (this.$refs.tree != undefined) {
        this.$refs.tree.setCheckedKeys([]);
      }
}

/** 我是在弹出框中显示树形控件*/
    SiteAccountRelship(row){
      this.reset();
      this.open = true;
      this.title = "title";
      
      let param = {
        stationId: row.id
      }
      /** 查询已选择的role*/
      listStationUserRelation(param).then( res =>{
          this.hasChoosenRole = res.rows

        this.$nextTick(() => {
          //弹出框弹出时，选中查到的数据 
          // node-key="userId" => this.hasChoosenRole 要有userId字段,才能确定是否选中
          this.$refs.tree.setCheckedNodes(this.hasChoosenRole);
        });
      })
    },



 /**  拿到选中的所有的role*/
    checkChange() {
     this.hasChoosenRoleNew = this.$refs.tree.getCheckedNodes();
    },

    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
        //若有多个树形结构，可通过type区分
        //此处type为tree（此处没用到），value为boolean
      this.$refs.tree.setCheckedNodes(value ? this.roleList: []);
    },

3.后端

@Override
    public int addStationUserRelation(StationUserRelationAddVo stationUserRelationAddVo) {
        //被修改的站点id
        String stationId = stationUserRelationAddVo.getStationId();
        //原有的站点拥有的role人员关系信息
        List<StationUserRelation> stationInfos = stationUserRelationAddVo.getStationUserRelationList();
        //变更后站点拥有的role信息
        List<SysUser> sysUsers = stationUserRelationAddVo.getSysUsers();

        //修改后的站点信息中存在原站点信息没有的role信息，则为添加
        for (SysUser sysUser : sysUsers) {
            int i = stationInfos.size();
            for (StationUserRelation stationInfo : stationInfos) {
                if (String.valueOf(sysUser.getUserId()).equals(stationInfo.getUserId())) {
                    i--;
                }
            }
            //若=，则表示修改后的信息中存在原信息中没有的数据=》添加，反之则不添加
            if(i == stationInfos.size()){
                StationUserRelation stationUserRelation = new StationUserRelation();
                stationUserRelation.setUserId(String.valueOf(sysUser.getUserId()));
                stationUserRelation.setStationId(stationId);

                insertStationUserRelation(stationUserRelation);
            }
        }

        //若原本站点拥有的role信息 不存在于添加的人员信息中，则表示已删除=>删除
        for (StationUserRelation stationInfo : stationInfos) {
            int i = stationInfos.size();
            for (SysUser sysUser : sysUsers) {
                if (stationInfo.getUserId().equals(String.valueOf(sysUser.getUserId()))) {
                    i--;
                }
            }
            if(i == stationInfos.size()){
                StationUserRelation stationUserRelation = new StationUserRelation();
                stationUserRelation.setId(stationInfo.getId());
                stationUserRelation.setDelFlag("1");
                updateStationUserRelation(stationUserRelation);
            }
        }
        return 1;
    }

不足之处，还请见谅