preface
Use scope: El-Cascader cascade selector, parent and child are not associated, return data is flat, need to write back
Horizontal data is processed into tree parent data
/* * List is flat data */ * list is flat data */
//
ListToTree(list,parentId,id) {
const copyList = list.slice(0);
const tree = [];
for (let i = 0; i < copyList.length; i++) {
let if_father = true; // If, after traversal, copyList[I] has no parent set, if_father is true, and if there is a parent set, false
// Find the parent of each item and make it the children of the parent
for (let j = 0; j < copyList.length; j++) {
if (copyList[i].parentId === copyList[j].id) {
// If copyList[I] has a parent set,if_father=false
if_father = false;
if (
copyList[j].children === undefined ||
copyList[j].children == ""
) {
copyList[j].children = [];
}
// Determine the current level subscript according to sn
copyList[j].children.push(copyList[i]);
// copyList[j].children[copyList[i].sn - 1] = copyList[i];}}// If the item has no parent, it is treated as the root node
if(if_father) { tree.push(copyList[i]); }}return tree;
},
Copy the codeProcess the data ID into an array ID recognized by the cascade selector
/* * recursive completion array backfill cascade * parameter ID is the ID you backfill * parameter arr is the flat series you loop through * parameter getIdArr is the resulting multilevel ARRAY of ids */
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); }}},Copy the codeCase show, you can paste directly into HTML file to view the effect
<html>
<head>
<meta charset="utf-8">
<title>The 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 cascade selector
// Application scenario: The parent and child are not associated. The returned data is flat and needs to be written back
new Vue({
el: '#app',
data() {
return {
cascader: {/ / cascade
value: [],/ / selected values
options:[],// Cascading data json
props: {
value: "id".label: "name".checkStrictly: true}},// Unprocessed cascading data JSON (flat data returned from simulated interactions)
InitialData:[
{
id:"1".parentId:"0".name:"Animal"
},
{
id:"2".parentId:"0".name:"Plant"
},
{
id:"11".parentId:"1".name:"Mammals"
},
{
id:"12".parentId:"1".name:"Oviparous animal"
},
{
id:"111".parentId:"11".name:"People"
},
{
id:"1112".parentId:"11".name:"Dog"
},
{
id:"1113".parentId:"11".name:"Cat"
},
{
id:"121".parentId:"12".name:"Chicken"
},
{
id:"122".parentId:"12".name:"Duck"
},
{
id:"21".parentId:"2".name:"Pine"
},
{
id:"22".parentId:"2".name:"The willow tree"},].// Write back data simulation
responseData:{
code: 200.data: {
id:'111'
},
message: "Request successful".success: true
}
}
},
mounted() {
// Get the cascading data
this.fn_to_CascaderData();
// Get write back data
this.fn_getData();
},
methods: {
handleChange(value) {
// console.log(value);
// Get the id of the selected node
console.log(value[value.length- 1]);
},
// Get the cascading data
fn_to_CascaderData(){
let arr = JSON.parse(JSON.stringify(this.InitialData));
this.cascader.options = this.ListToTree(arr);
},
// Get write back data
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);
},
/* * List is flat data */ * list is flat data */
//
ListToTree(list,parentId,id) {
const copyList = list.slice(0);
const tree = [];
for (let i = 0; i < copyList.length; i++) {
let if_father = true; // If, after traversal, copyList[I] has no parent set, if_father is true, and if there is a parent set, false
// Find the parent of each item and make it the children of the parent
for (let j = 0; j < copyList.length; j++) {
if (copyList[i].parentId === copyList[j].id) {
// If copyList[I] has a parent set,if_father=false
if_father = false;
if (
copyList[j].children === undefined ||
copyList[j].children == ""
) {
copyList[j].children = [];
}
// Determine the current level subscript according to sn
copyList[j].children.push(copyList[i]);
// copyList[j].children[copyList[i].sn - 1] = copyList[i];}}// If the item has no parent, it is treated as the root node
if(if_father) { tree.push(copyList[i]); }}return tree;
},
/* * recursive completion array backfill cascade * parameter ID is the ID you backfill * parameter arr is the flat series you loop through * parameter getIdArr is the resulting multilevel ARRAY of ids */
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>
Copy the code