el-cascader element级联选择器(递归回显办法),单选与多选 全局封装
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
描述:使用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 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)