An error is displayed in the cascade selector
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style>
@import url('/ / unpkg.com/[email protected]/lib/theme-chalk/index.css');
</style>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="/ / unpkg.com/[email protected]/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="block">
<span class="demonstration"> Default click triggers the submenu </span> < el-Cascader V-model ="value"
:options="options"
:props="{ expandTrigger: 'click', checkStrictly: true }"
@change="handleChange"
></el-cascader>
</div>
</div>
<script>
var Main = {
data() {
return{value: [], // Selected binding values options: [// data source {value:'zhinan',
label: 'guide',
children: [
{
value: 'shejiyuanze',
label: 'Design Principles',
children: [
{
value: 'yizhi',
label: 'consistent',
},
{
value: 'fankui',
label: 'feedback',
}
],
},
{
value: 'daohang',
label: 'navigation',
children: [
{
value: 'cexiangdaohang',
label: 'Lateral navigation',
},
{
value: 'dingbudaohang',
label: 'Top navigation',
},
],
},
],
},
{
value: 'zujian',
label: 'components',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout Layout',
},
{
value: 'button',
label: 'Button Button',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio Checkbox ',
},
{
value: 'checkbox',
label: 'Checkbox multiple checkboxes',
},
{
value: 'switch',
label: 'the Switch Switch',
},
{
value: 'slider',
label: 'the Slider thumb',
},
{
value: 'form',
label: 'Form Form',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'the Table form',
},
{
value: 'tag',
label: 'the Tag label',}],}],},],}},created() {
const selected = 'radio'Const result = this.getSelectedarr (selected, this.options) console.log(result)}, methods: const result = this.getSelectedarr (selected, this.options) console.log(result)} {handleChange(value) {console.log(value)}, /** * key Query result * options data source * keyName Query data source property, * childrenName Name of the child node of the data source */ getSelectedArr(key, options, keyName ='value', childrenName = 'children'){const tempArr = [] // Array to operate on recursivelyletDepth = 0 // Define the global levelletResultArr = [] // Hold the result array // recursive call const childrenEach = (options, curDepth) => {// Query the location of the given value in the tree structurefor (let i = 0; i < options.length; i++) {
depth = curDepth
const curKey = options[i][keyName]
tempArr[depth] = curKey
if(curKey === key) {resultArr = [...tempArr]break
} else {
if(options[I][childrenName]) {depth++ // childrenEach(options[I][childrenName], depth)}else{// Query failed and there are no child nodesreturn[]}}}return resultArr
}
return childrenEach(options, depth)
},
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app'</script> </body> </ HTML > Cascading selector echo problemCopy the code