The first time I used el-cascader, I stepped on the pits and wrote a record. I hope it can help you who are also apes.
Below is an example of a restore project I wrote
Bug1 is that the smallest subset still has children, but children is an empty array. When el-cascader renders, it finds that there are children, so it continues to render, but there is no data
<el-cascader
:props="defaultParams"
:options="options"
v-model="form.selectedOptions"
>
</el-cascader>
//option是要选择的数据
options: [
{
id: "1",
name: "水果",
level: "1",
pid: "0",
status: "1",
sub: [
{
id: "4",
name: "苹果",
level: "2",
pid: "1",
status: "1",
sub: [
{
id: "41",
name: "红富士",
level: "2",
pid: "1",
status: "1",
sub: [],
},
{
id: "42",
name: "元帅",
level: "2",
pid: "1",
status: "1",
sub: [],
},
],
},
{
id: "8",
name: "香蕉",
level: "2",
pid: "1",
status: "1",
sub: [],
},
],
},
{
id: "2",
name: "食品",
level: "1",
pid: "0",
status: "1",
sub: [
{
id: "5",
name: "馒头",
level: "2",
pid: "2",
status: "1",
sub: [],
},
{
id: "6",
name: "大米",
level: "2",
pid: "2",
status: "1",
sub: [],
},
],
},
],My sub here is equivalent to children, you can see my smallest subset, there is still sub: [ ], resulting in empty rendering
Solution : process the source data (here source data ☞ options), I think other solutions are to assign undefine to the empty children, or directly process the source data to take out the data to be used. Here I write down both methods, You can choose one to use,
The first:
// 递归判断列表，把最后的sub设为undefined sub也就是源数据里的children
getTreeData(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].sub.length < 1) {
// sub若为空数组，则将sub设为undefined
data[i].sub = undefined;
} else {
// sub若不为空数组，则继续 递归调用 本方法
this.getTreeData(data[i].sub);
}
}
return data;
},The second is to filter the source data out of children, take out the main data, and put it in a new array, so as to get a new array without children, just call this method when using it
getTreeData(datas) {
let data = [];
datas.map((item) => {
if (item.sub.length > 0) {
let dadax = {
label: item.name, //这是需要展示的数据 我的数据是name，所以label对应的是name
value: item.id,
sub: this.getTreeData(item.sub),
};
data.push(dadax);
} else {
let dadax = {
label: item.name,
value: item.id,
};
data.push(dadax);
}
return data;
});
return data;
},When Bug2 is doing data echo, the data is always echoed out. After searching all kinds of methods, it still can’t be solved. It was later discovered that an additional attribute was added to the props, resulting in no data echo.
Next, let’s talk about how the data is echoed. In fact, it is very simple. You only need the node id of the corresponding hierarchical relationship in the backend.
For example, I have to pay special attention to explaining to the back-end boss that the required data format is a large array, and there are small arrays one by one. An array represents an echoed data. What I do here is multiple selection. Therefore, there are a lot of echoed data. Here are two examples. Multiple echoed data can be as many as a few arrays.
Tips: When I was looking for other answers, I accidentally found that you can get the selected data through the getCheckedNodes method of the official document and then bind it with v- model , and you can also echo the data. I haven’t tried this method, and it should be possible. of
Next, let’s talk about my missteps. The main reason is that I’m not familiar with the el-cascader component. Add the attribute emitPath: false . Here’s how to solve the mismatch between the project field and the component field. The fields displayed by el-cascader by default is label
If you want to know more about the usage of emitPath, you can refer to the official website of element-ui
At this point, the use of el-cascader has come to an end. If there is something missing, I hope to add more. If you think it is possible, please give me a like.