描述:使用el-cascader 级联选择器,根据返回的子集id(最底层一级)进行回显。本次更新完善了多选与单选,不需要自己判断,传入refsName即可获取组件设置的props参数,也可以命名一个变量等于这个调用,从而获取参数;希望能给你一些启发。曾有人说过,其实可以不用递归的方法。我是没找到哪种方法。。。

以下只是个人的项目经验:(带详细的注解)
图例:
在这里插入图片描述
组件内调用:

    get_OrganizationId2(ids, treeData, refsName) {
      /* 
        ids 后端返回单选或者多选 的id数组(单选:string,多选为:array)
        treeData 整个树状数据
        refsName 级联组件ref值
       */
      let checkdeType = this.$refs[refsName].props.multiple; //取 多选true 单选false
      let ValueName = this.$refs[refsName].props.value; //取 value 字段
      let childrenName = this.$refs[refsName].props.children; //取 children 字段
      let newModel = []; //赋值默认选中数组
      let itemIds = []; //单条id 回显数组
      let returnActive = false; //是否找着对应部门(数据返回单个)
      let lastRow = lastVerify(treeData); //获取最后遍历的id
      if (!checkdeType && !(ids instanceof Array)) ids = [ids]; // 单选 ids 格式转换
      for (let i = 0; i < ids.length; i++) {
        itemIds = [];
        returnActive = false;
        filterChild(ids[i], [], treeData);
        if (itemIds.length > 0) {
          if (checkdeType) {
            //多选
            newModel.push(itemIds);
          } else {
            //单选
            newModel = itemIds;
          }
        }
      }
      /* 数据过滤解释 回显数据绑定 */
      this.$nextTick(() => {
        this.dataForm.defDeptIds = newModel;
      });
      return newModel;
      /* 过滤子级 */
      function filterChild(id, parentIds, selfArr) {
        for (let j = 0; j < selfArr.length; j++) {
          if (returnActive) return false;
          returnActive = selfArr[j][ValueName] == id;
          if (returnActive) {
            parentIds.push(selfArr[j][ValueName]);
            itemIds = parentIds;
            return false;
          } else if (
            selfArr[j][childrenName] &&
            selfArr[j][childrenName].length > 0
          ) {
            parentIds.push(selfArr[j][ValueName]);
            filterChild(id, parentIds, selfArr[j][childrenName]);
          } else {
            /* 最后一级的最后一个判断 */
            if (lastRow && selfArr[j][ValueName] == lastRow) {
              console.log("未找到对应部门!", id);
              parentIds = [];
              itemIds = parentIds;
              return false;
            }
          }
          /* 循环结束 未找着父级 */
          if (j == selfArr.length - 1 && !returnActive) {
            parentIds.splice(parentIds.length - 1, 1);
          }
        }
      }

      /* 是否最子级判断 */
      function lastVerify(allTreeData = treeData) {
        if (allTreeData && allTreeData.length > 0) {
          if (
            allTreeData[allTreeData.length - 1][childrenName] &&
            allTreeData[allTreeData.length - 1][childrenName].length > 0
          ) {
            return lastVerify(allTreeData[allTreeData.length - 1][childrenName]);
          } else {
            return lastVerify(allTreeData[allTreeData.length - 1]);
          }
        } else {
          if (allTreeData[ValueName]) return allTreeData[ValueName];
          return false;
        }
      }
    },

调用实例(多选):

 		let treeDef = this.get_OrganizationId2(
 				["32321","131231","4234"],
              this.treeData,
              "deptCascader"
            );

调用实例(单选):

 		let treeDef = this.get_OrganizationId2(
 				"32321",
              this.treeData,
              "deptCascader"
            );

全局封装:

export const get_OrganizationId2=(ids, treeData, refsName,_this=this,vModelStr=[])=>{
  /*
    参数说明:
        ids: 后端返回单选或者多选 的id数组(单选:string,多选为:array)
        treeData: 整个树状数据
        refsName: 级联组件ref值
        _this: 当前组件的this;
        vModelStr: 绑定数据字段(array类型) 例:['dataForm','defProJsqy'] 表示 this.dataForm.defProJsqy
   */
  let checkdeType = _this.$refs[refsName].props.multiple; //取 多选true 单选false
  let ValueName = _this.$refs[refsName].props.value; //取 value 字段
  let childrenName = _this.$refs[refsName].props.children; //取 children 字段
  let newModel = []; //赋值默认选中数组
  let itemIds = []; //单条id 回显数组
  let returnActive = false; //是否找着对应部门(数据返回单个)
  let lastRow = lastVerify(treeData); //获取最后遍历的id
  if (!checkdeType && !(ids instanceof Array)) ids = [ids]; // 单选 ids 格式转换
  for (let i = 0; i < ids.length; i++) {
    itemIds = [];
    returnActive = false;
    filterChild(ids[i], [], treeData);
    if (itemIds.length > 0) {
      if (checkdeType) {
        //多选
        newModel.push(itemIds);
      } else {
        //单选
        newModel = itemIds;
      }
    }
  }
  /* 数据过滤解释 回显数据绑定 */
  _this.$nextTick(() => {
    let evalStr="_this";
    for(let m=0;m<vModelStr.length-1;m++){
      evalStr+="['"+vModelStr[m]+"']";
    }
    let modelData=eval(evalStr);
    modelData[vModelStr[vModelStr.length-1]]=newModel;
  });
  return newModel;
  /* 过滤子级 */
  function filterChild(id, parentIds, selfArr) {
    for (let j = 0; j < selfArr.length; j++) {
      if (returnActive) return false;
      returnActive = selfArr[j][ValueName] == id;
      if (returnActive) {
        parentIds.push(selfArr[j][ValueName]);
        itemIds = parentIds;
        return false;
      } else if (
        selfArr[j][childrenName] &&
        selfArr[j][childrenName].length > 0
      ) {
        parentIds.push(selfArr[j][ValueName]);
        filterChild(id, parentIds, selfArr[j][childrenName]);
      } else {
        /* 最后一级的最后一个判断 */
        if (lastRow && selfArr[j][ValueName] == lastRow) {
          console.log("未找到对应部门!", id);
          parentIds = [];
          itemIds = parentIds;
          return false;
        }
      }
      /* 循环结束 未找着父级 */
      if (j == selfArr.length - 1 && !returnActive) {
        parentIds.splice(parentIds.length - 1, 1);
      }
    }
  }

  /* 是否最后子级判断 */
  function lastVerify(allTreeData = treeData) {
    if (allTreeData && allTreeData.length > 0) {
      if (
        allTreeData[allTreeData.length - 1][childrenName] &&
        allTreeData[allTreeData.length - 1][childrenName].length > 0
      ) {
        return lastVerify(allTreeData[allTreeData.length - 1][childrenName]);
      } else {
        return lastVerify(allTreeData[allTreeData.length - 1]);
      }
    } else {
      if (allTreeData[ValueName]) return allTreeData[ValueName];
      return false;
    }
  }
};
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐