How do element cascading menus query others according to one value?
for example, according to the last level of value: "kekong" to find out its parent and ancestor to spell: guide = > Design principle = > controllable
options: [{
value: "zhinan",
label: "",
children: [{
value: "shejiyuanze",
label: "",
children: [
{
value: "yizhi",
label: ""
},
{
value: "fankui",
label: ""
},
{
value: "xiaolv",
label: ""
},
{
value: "kekong",
label: ""
}]
}]
}]
I'm not sure what your check means. Is it click
or filter
? Most of the methods provided by
element tree
provide the return of Node
. Just look up parent
and find null
for yourself.
the following is a way to manipulate raw data
, but to be honest, this method is used with element tree
. I don't know what the requirement is.
let options = [{
value: 'zhinan',
label: '',
children: [{
value: 'shejiyuanze',
label: '',
children: [{
value: 'yizhi',
label: ''
},
{
value: 'fankui',
label: ''
},
{
value: 'xiaolv',
label: ''
},
{
value: 'kekong',
label: ''
}
]
}, {
value: 'shejiyuanze2',
label: '2',
children: [{
value: 'yizhi2',
label: '2'
}]
}]
}, {
value: 'zhinan2',
label: '2',
}]
function findOption(parents, val = '', node = []) {
for (let p of parents) {
if (p.value === val) {
node.push(p.label)
return node;
} else {
if (p.children && p.children.length) {
node.push(p.label);
let same = findOption(p.children, val, node);
if (!same) {
node.splice(node.length - 1, 1);
} else {
return node;
}
}
}
}
}
let node = findOption(options, 'kekong');
console.log(node.join(' => '))
you don't need to query anything else. Element-ui 's cascade selector returns you an array
if you choose the design principles of the guide, you will get
['zhinan',' shejiyuanze', 'kekong']
two simple ways to prefix
1: change value into Chinese characters
2: set an object before you start
.
const fontMap = {
zhinan: '',
shejiyuanze: ''
...
}
then you get the object value
from the object key in the array. Third, you use find every time in the array
//
const one = options.find(x => x.label === value[0])
...
the fourth method is to generate a tree based on the existing data structure. Each tree node has its own parent, and then you first find the node you want, and then while
according to the fact that parent is not empty
.