The requirement is to achieve the effect of Picture 2 after clicking on picture 1

Html part:

<el-cascader-panel
        ref="cascader"
        :change-on-select="true"
        :options="dataList"
        :props="props"
        emitPath="true"
        @change="handleChange"
        v-model="selectedOptions"
>
</el-cascader-panel>
Copy the code

Js:

DataList: [],// dataList selectedOptions: [],// the selected node value, used to say props: {value: 'id',// set the id value of each menu label: 'name',// set the name value of each menu children: 'children',// Sublevel checkStrictly: true// Observe that parent and child nodes are not related to each other -- any level of the cascading panel can be selected}, label: ", code:"Copy the code

Background return level 3 list data format:

HandleChange (value) {if (value.length > 0) {let checkNode = this.$refs['cascader'].getCheckedNodes()[0] console.log(checkNode, 'node ') if (checknode. level == 1&& checknode. parent == null){this.label = checknode. label} else if (checknode. level == 2 && checkNode.parent.parent == null){ this.label = checkNode.parent.label + '-' + checkNode.label } else if (checkNode.level == 3 && checkNode.parent.parent ! = null){ this.label = checkNode.parent.parent.label + '-' + checkNode.parent.label + '-' + checkNode.label } this.code =  checkNode.data.code } }Copy the code

To this level of list data display and click events have been completed ！！！！

Get the id of the selected menu submitted by the user based on the background interface and push it into the selectedOptions array

The value in selectedOptions needs to be the same as the value in your props, and the interface must return this value!!