1 树级结构转平级结构
<template>
<div class="">
<el-cascader
v-model="value"
:options="options"
:props="customProps"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
name: "cascader",
data() {
return {
value: "",
options: [
{
value: "zhinan",
label: "指南",
parentId: "0",
children: [
{
value: "shejiyuanze",
label: "设计原则",
parentId: "zhinan",
children: [
{
value: "yizhi",
label: "一致",
parentId: "shejiyuanze",
},
{
value: "fankui",
label: "反馈",
parentId: "shejiyuanze",
},
{
value: "xiaolv",
label: "效率",
parentId: "shejiyuanze",
},
{
value: "kekong",
label: "可控",
parentId: "shejiyuanze",
},
],
},
{
value: "daohang",
label: "导航",
parentId: "zhinan",
children: [
{
value: "cexiangdaohang",
label: "侧向导航",
parentId: "daohang",
},
{
value: "dingbudaohang",
label: "顶部导航",
parentId: "daohang",
},
],
},
],
},
],
treeLevel: [],
customProps: {
label: "label",
value: "value",
children: "children",
},
};
},
mounted() {
this.treeConvert(this.options);
},
methods: {
// 树转平级
treeConvert(list) {
list.forEach((x) => {
this.treeLevel.push({
value: x.value,
label: x.label,
parentId: x.parentId,
});
if (x.children && x.children.length) {
this.treeConvert(x.children);
}
});
},
handleChange(value) {
console.log(value);
},
},
};
</script>
<style scoped lang="less">
</style>
2 平级结构转树级结构
<template>
<div class="">
<el-cascader
v-model="value"
:options="options"
:props="customProps"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
name: "cascader",
data() {
return {
value: "",
options: [
{
value: "zhinan",
label: "指南",
parentId: "0",
children: [
{
value: "shejiyuanze",
label: "设计原则",
parentId: "zhinan",
children: [
{
value: "yizhi",
label: "一致",
parentId: "shejiyuanze",
},
{
value: "fankui",
label: "反馈",
parentId: "shejiyuanze",
},
{
value: "xiaolv",
label: "效率",
parentId: "shejiyuanze",
},
{
value: "kekong",
label: "可控",
parentId: "shejiyuanze",
},
],
},
{
value: "daohang",
label: "导航",
parentId: "zhinan",
children: [
{
value: "cexiangdaohang",
label: "侧向导航",
parentId: "daohang",
},
{
value: "dingbudaohang",
label: "顶部导航",
parentId: "daohang",
},
],
},
],
},
],
treeLevel: [],
customProps: {
label: "label",
value: "value",
children: "children",
},
};
},
mounted() {
this.treeConvert(this.options);
this.options = this.treeChildren(this.treeLevel, "0");
},
methods: {
// 树转平级
treeConvert(list) {
list.forEach((x) => {
this.treeLevel.push({
value: x.value,
label: x.label,
parentId: x.parentId,
});
if (x.children && x.children.length) {
this.treeConvert(x.children);
}
});
},
// 平转树 --- 此时的数据已经是平级的 被上面的方法转换过
// list 每次循环值 parentId第一层的父级ID(一般第一层的父级ID都是统一的)
treeChildren(list, parentId) {
let arr = [];
list.forEach((item) => {
// 是否找到了节点
// parentId 默认为null 优先查父节点
if (item.parentId === parentId) {
// 找到了节点 递归循环匹配是否存在子级节点
const children = this.treeChildren(list, item.value);
if (children && children.length) {
item.children = children;
}
arr.push(item);
}
});
return arr
},
handleChange(value) {
console.log(value);
},
},
};
</script>
<style scoped lang="less">
</style>
3 根据最后一级标识查完整层级
-
首先,如果绑定值只有最后一级的标识的话是可以正常回显完整层级路径的,但如果点开级联选择器下拉框会发现没有高亮指出到底最后一级是哪个,如图:
-
正确展示示意图:
实现代码
<template>
<div class="">
<el-cascader
v-model="value"
:options="options"
:props="customProps"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
name: "cascader",
data() {
return {
value: "yizhi",
options: [
{
value: "zhinan",
label: "指南",
parentId: "0",
children: [
{
value: "shejiyuanze",
label: "设计原则",
parentId: "zhinan",
children: [
{
value: "yizhi",
label: "一致",
parentId: "shejiyuanze",
},
{
value: "fankui",
label: "反馈",
parentId: "shejiyuanze",
},
{
value: "xiaolv",
label: "效率",
parentId: "shejiyuanze",
},
{
value: "kekong",
label: "可控",
parentId: "shejiyuanze",
},
],
},
{
value: "daohang",
label: "导航",
parentId: "zhinan",
children: [
{
value: "cexiangdaohang",
label: "侧向导航",
parentId: "daohang",
},
{
value: "dingbudaohang",
label: "顶部导航",
parentId: "daohang",
},
],
},
],
},
],
treeLevel: [],
customProps: {
label: "label",
value: "value",
children: "children",
},
};
},
mounted() {
this.queryLevel(this.options, this.options, this.value, []);
},
methods: {
// 根据最后一级标识查出完整层级
// list 每次循环值 oldList 完整的树级结构 id 最后一层的标识ID tree 容器
queryLevel(list, oldList, id, tree) {
list.forEach((x) => {
if (x.value === id || x.value === id) {
// 每次找到对应的往数组前添加一个当前层级标识
tree.unshift(x.value);
// 如果已经找到 则本次循环重新开始 前两个值传完整树级结构数据
this.queryLevel(oldList, oldList, x.parentId, tree);
}
// 再次调用
if (x.children && x.children.length) {
this.queryLevel(x.children, oldList, id, tree);
}
});
this.value = tree;
},
handleChange(value) {
console.log(value);
},
},
};
</script>
<style scoped lang="less">
</style>
-
默认
value
绑定值是yizhi
,经过方法的查询后就变成的下边的数据,展示形式也正确。
4 完整代码(方便测试)
<template>
<div class="">
<el-cascader
v-model="value"
:options="options"
:props="customProps"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
name: "cascader",
data() {
return {
value: "yizhi",
options: [
{
value: "zhinan",
label: "指南",
parentId: "0",
children: [
{
value: "shejiyuanze",
label: "设计原则",
parentId: "zhinan",
children: [
{
value: "yizhi",
label: "一致",
parentId: "shejiyuanze",
},
{
value: "fankui",
label: "反馈",
parentId: "shejiyuanze",
},
{
value: "xiaolv",
label: "效率",
parentId: "shejiyuanze",
},
{
value: "kekong",
label: "可控",
parentId: "shejiyuanze",
},
],
},
{
value: "daohang",
label: "导航",
parentId: "zhinan",
children: [
{
value: "cexiangdaohang",
label: "侧向导航",
parentId: "daohang",
},
{
value: "dingbudaohang",
label: "顶部导航",
parentId: "daohang",
},
],
},
],
},
],
newOptions:[],
treeLevel: [],
customProps: {
label: "label",
value: "value",
children: "children",
},
};
},
mounted() {
this.treeConvert(this.options);
this.options = this.treeChildren(this.treeLevel, "0");
this.queryLevel(this.options, this.options, this.value, []);
},
methods: {
// 树转平级
treeConvert(list) {
list.forEach((x) => {
this.treeLevel.push({
value: x.value,
label: x.label,
parentId: x.parentId,
});
if (x.children && x.children.length) {
this.treeConvert(x.children);
}
});
},
// 平转树
// list 每次循环值 parentId第一层的父级ID(一般第一层的父级ID都是统一的)
treeChildren(list, parentId) {
let arr = [];
list.forEach((item) => {
// 是否找到了节点
// parentId 默认为null 优先查父节点
if (item.parentId === parentId) {
// 找到了节点 递归循环匹配是否存在子级节点
const children = this.treeChildren(list, item.value);
if (children && children.length) {
item.children = children;
}
arr.push(item);
}
});
return arr
},
// 根据最后一级标识查出完整层级
// list 每次循环值 oldList 完整的树级结构 id 最后一层的标识ID tree 容器
queryLevel(list, oldList, id, tree) {
list.forEach((x) => {
if (x.value === id || x.value === id) {
// 每次找到对应的往数组前添加一个当前层级标识
tree.unshift(x.value);
// 如果已经找到 则本次循环重新开始 前两个值传完整树级结构数据
this.queryLevel(oldList, oldList, x.parentId, tree);
}
// 再次调用
if (x.children && x.children.length) {
this.queryLevel(x.children, oldList, id, tree);
}
});
this.value = tree;
},
handleChange(value) {
console.log(value);
},
},
};
</script>
<style scoped lang="less">
</style>