1 樹(shù)級(jí)結(jié)構(gòu)轉(zhuǎn)平級(jí)結(jié)構(gòu)
<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: "設(shè)計(jì)原則",
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: "導(dǎo)航",
parentId: "zhinan",
children: [
{
value: "cexiangdaohang",
label: "側(cè)向?qū)Ш?,
parentId: "daohang",
},
{
value: "dingbudaohang",
label: "頂部導(dǎo)航",
parentId: "daohang",
},
],
},
],
},
],
treeLevel: [],
customProps: {
label: "label",
value: "value",
children: "children",
},
};
},
mounted() {
this.treeConvert(this.options);
},
methods: {
// 樹(shù)轉(zhuǎn)平級(jí)
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 平級(jí)結(jié)構(gòu)轉(zhuǎn)樹(shù)級(jí)結(jié)構(gòu)
<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: "設(shè)計(jì)原則",
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: "導(dǎo)航",
parentId: "zhinan",
children: [
{
value: "cexiangdaohang",
label: "側(cè)向?qū)Ш?,
parentId: "daohang",
},
{
value: "dingbudaohang",
label: "頂部導(dǎo)航",
parentId: "daohang",
},
],
},
],
},
],
treeLevel: [],
customProps: {
label: "label",
value: "value",
children: "children",
},
};
},
mounted() {
this.treeConvert(this.options);
this.options = this.treeChildren(this.treeLevel, "0");
},
methods: {
// 樹(shù)轉(zhuǎn)平級(jí)
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);
}
});
},
// 平轉(zhuǎn)樹(shù) --- 此時(shí)的數(shù)據(jù)已經(jīng)是平級(jí)的 被上面的方法轉(zhuǎn)換過(guò)
// list 每次循環(huán)值 parentId第一層的父級(jí)ID(一般第一層的父級(jí)ID都是統(tǒng)一的)
treeChildren(list, parentId) {
let arr = [];
list.forEach((item) => {
// 是否找到了節(jié)點(diǎn)
// parentId 默認(rèn)為null 優(yōu)先查父節(jié)點(diǎn)
if (item.parentId === parentId) {
// 找到了節(jié)點(diǎn) 遞歸循環(huán)匹配是否存在子級(jí)節(jié)點(diǎn)
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 根據(jù)最后一級(jí)標(biāo)識(shí)查完整層級(jí)
-
首先摩窃，如果綁定值只有最后一級(jí)的標(biāo)識(shí)的話是可以正掣福回顯完整層級(jí)路徑的晴竞，但如果點(diǎn)開(kāi)級(jí)聯(lián)選擇器下拉框會(huì)發(fā)現(xiàn)沒(méi)有高亮指出到底最后一級(jí)是哪個(gè)亲族，如圖：
示例圖 -
正確展示示意圖：
示例圖 實(shí)現(xiàn)代碼
<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: "設(shè)計(jì)原則",
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: "導(dǎo)航",
parentId: "zhinan",
children: [
{
value: "cexiangdaohang",
label: "側(cè)向?qū)Ш?,
parentId: "daohang",
},
{
value: "dingbudaohang",
label: "頂部導(dǎo)航",
parentId: "daohang",
},
],
},
],
},
],
treeLevel: [],
customProps: {
label: "label",
value: "value",
children: "children",
},
};
},
mounted() {
this.queryLevel(this.options, this.options, this.value, []);
},
methods: {
// 根據(jù)最后一級(jí)標(biāo)識(shí)查出完整層級(jí)
// list 每次循環(huán)值 oldList 完整的樹(shù)級(jí)結(jié)構(gòu) id 最后一層的標(biāo)識(shí)ID tree 容器
queryLevel(list, oldList, id, tree) {
list.forEach((x) => {
if (x.value === id || x.value === id) {
// 每次找到對(duì)應(yīng)的往數(shù)組前添加一個(gè)當(dāng)前層級(jí)標(biāo)識(shí)
tree.unshift(x.value);
// 如果已經(jīng)找到 則本次循環(huán)重新開(kāi)始 前兩個(gè)值傳完整樹(shù)級(jí)結(jié)構(gòu)數(shù)據(jù)
this.queryLevel(oldList, oldList, x.parentId, tree);
}
// 再次調(diào)用
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>
-
默認(rèn)
value綁定值是yizhi,經(jīng)過(guò)方法的查詢后就變成的下邊的數(shù)據(jù)崔慧，展示形式也正確拂蝎。
效果圖
4 完整代碼(方便測(cè)試)
<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: "設(shè)計(jì)原則",
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: "導(dǎo)航",
parentId: "zhinan",
children: [
{
value: "cexiangdaohang",
label: "側(cè)向?qū)Ш?,
parentId: "daohang",
},
{
value: "dingbudaohang",
label: "頂部導(dǎo)航",
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: {
// 樹(shù)轉(zhuǎn)平級(jí)
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);
}
});
},
// 平轉(zhuǎn)樹(shù)
// list 每次循環(huán)值 parentId第一層的父級(jí)ID(一般第一層的父級(jí)ID都是統(tǒng)一的)
treeChildren(list, parentId) {
let arr = [];
list.forEach((item) => {
// 是否找到了節(jié)點(diǎn)
// parentId 默認(rèn)為null 優(yōu)先查父節(jié)點(diǎn)
if (item.parentId === parentId) {
// 找到了節(jié)點(diǎn) 遞歸循環(huán)匹配是否存在子級(jí)節(jié)點(diǎn)
const children = this.treeChildren(list, item.value);
if (children && children.length) {
item.children = children;
}
arr.push(item);
}
});
return arr
},
// 根據(jù)最后一級(jí)標(biāo)識(shí)查出完整層級(jí)
// list 每次循環(huán)值 oldList 完整的樹(shù)級(jí)結(jié)構(gòu) id 最后一層的標(biāo)識(shí)ID tree 容器
queryLevel(list, oldList, id, tree) {
list.forEach((x) => {
if (x.value === id || x.value === id) {
// 每次找到對(duì)應(yīng)的往數(shù)組前添加一個(gè)當(dāng)前層級(jí)標(biāo)識(shí)
tree.unshift(x.value);
// 如果已經(jīng)找到 則本次循環(huán)重新開(kāi)始 前兩個(gè)值傳完整樹(shù)級(jí)結(jié)構(gòu)數(shù)據(jù)
this.queryLevel(oldList, oldList, x.parentId, tree);
}
// 再次調(diào)用
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>
