前言
使用范围:el-cascader级联选择器,父子不关联,返回数据是平级,需要回写
将平级数据处理成tree状的父子数据
/*
*将平级数据处理成父子关系的tree数据
*适用于根据parentId和id确认子父关系的平级数据
*parentId和id可自行替换成实际确认子父关系的属性
*参数list是平级数据
*/
//
ListToTree(list,parentId,id) {
const copyList = list.slice(0);
const tree = [];
for (let i = 0; i < copyList.length; i++) {
let if_father = true; //如果遍历后,copyList[i]没有父集,if_father为true,有父集为false
// 找出每一项的父节点,并将其作为父节点的children
for (let j = 0; j < copyList.length; j++) {
if (copyList[i].parentId === copyList[j].id) {
//如果copyList[i]有父集,if_father=false
if_father = false;
if (
copyList[j].children === undefined ||
copyList[j].children == ""
) {
copyList[j].children = [];
}
// 根据sn确定当前层级下标
copyList[j].children.push(copyList[i]);
// copyList[j].children[copyList[i].sn - 1] = copyList[i];
}
}
//如果该项没有父节点,则将其当根节点
if (if_father) {
tree.push(copyList[i]);
}
}
return tree;
},
将数据id,处理成级联选择器识别的数组id
/*
*递归补全数组回填级联
*参数id是你回填的id
*参数arr是你要循环的平级数组
*参数getIdArr是最终得到的多级id数组
*/
fn_cascader_recursion_id(id,arr,getIdArr){
for(const item of arr) {
if (item.id===id) {
getIdArr.unshift(id);
this.fn_cascader_recursion_id(item.parentId,arr,getIdArr);
}
}
},
案例展示,可以直接粘贴成html文件查看效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-cascader
v-model="cascader.value"
:options="cascader.options"
@change="handleChange"
:props="cascader.props"
clearable
filterable
>
</el-cascader>
</div>
</body>
<script>
// el-cascader级联选择器
// 应用场景:父子不关联,返回数据是平级,需要回写
new Vue({
el: '#app',
data() {
return {
cascader:{//级联
value: [],//选中值
options:[],//级联数据json
props: {
value: "id",
label: "name",
checkStrictly: true
},
},
//未处理的级联数据json(模拟交互返回的平级数据)
InitialData:[
{
id:"1",
parentId:"0",
name:"动物"
},
{
id:"2",
parentId:"0",
name:"植物"
},
{
id:"11",
parentId:"1",
name:"哺乳动物"
},
{
id:"12",
parentId:"1",
name:"卵生动物"
},
{
id:"111",
parentId:"11",
name:"人"
},
{
id:"1112",
parentId:"11",
name:"狗"
},
{
id:"1113",
parentId:"11",
name:"猫"
},
{
id:"121",
parentId:"12",
name:"鸡"
},
{
id:"122",
parentId:"12",
name:"鸭"
},
{
id:"21",
parentId:"2",
name:"松树"
},
{
id:"22",
parentId:"2",
name:"柳树"
},
],
//回写数据模拟
responseData:{
code: 200,
data: {
id:'111'
},
message: "请求成功",
success: true
}
}
},
mounted() {
//获取级联数据
this.fn_to_CascaderData();
//获取回写数据
this.fn_getData();
},
methods: {
handleChange(value) {
// console.log(value);
// 获得选中节点的id,工作中大多也是需要这个
console.log(value[value.length-1]);
},
//获取级联数据
fn_to_CascaderData(){
let arr = JSON.parse(JSON.stringify(this.InitialData));
this.cascader.options = this.ListToTree(arr);
},
//获取回写数据
fn_getData(){
let res = JSON.parse(JSON.stringify(this.responseData));
let arr = JSON.parse(JSON.stringify(this.InitialData));
this.fn_cascader_recursion_id(res.data.id,arr,this.cascader.value);
},
/*
*将平级数据处理成父子关系的tree数据
*适用于根据parentId和id确认子父关系的平级数据
*parentId和id可自行替换成实际确认子父关系的属性
*参数list是平级数据
*/
//
ListToTree(list,parentId,id) {
const copyList = list.slice(0);
const tree = [];
for (let i = 0; i < copyList.length; i++) {
let if_father = true; //如果遍历后,copyList[i]没有父集,if_father为true,有父集为false
// 找出每一项的父节点,并将其作为父节点的children
for (let j = 0; j < copyList.length; j++) {
if (copyList[i].parentId === copyList[j].id) {
//如果copyList[i]有父集,if_father=false
if_father = false;
if (
copyList[j].children === undefined ||
copyList[j].children == ""
) {
copyList[j].children = [];
}
// 根据sn确定当前层级下标
copyList[j].children.push(copyList[i]);
// copyList[j].children[copyList[i].sn - 1] = copyList[i];
}
}
//如果该项没有父节点,则将其当根节点
if (if_father) {
tree.push(copyList[i]);
}
}
return tree;
},
/*
*递归补全数组回填级联
*参数id是你回填的id
*参数arr是你要循环的平级数组
*参数getIdArr是最终得到的多级id数组
*/
fn_cascader_recursion_id(id,arr,getIdArr){
for (const item of arr) {
if (item.id===id) {
getIdArr.unshift(id);
this.fn_cascader_recursion_id(item.parentId,arr,getIdArr);
}
}
},
},
})
</script>
</html>