Cascader- radio mode, to expand the drop-down directly to see the checked data

Problem description

  1. I’ve selected the value ‘consistent’, but when I pull it up, instead of showing the value that I selected, I’m showing the value ‘navigation’
  2. Requirement: When you open the drop – down, you need to see the selected value

Effect after simulation

1. After simulating the effect, open the drop-down list and see the selected value directly

Show the code

<el-cascader ref="Cascader1" v-model="value" :options="options" :props="{label:'name',value:'id'}"
@change="handleChange" @visible-change="qdVisibleChange" clearable>
</el-cascader>
Copy the code

The solution

methods:{
    handleChange (value) {
        console.log(value)
    },
    // Solution main code
    qdVisibleChange (val) {
        if(! val) {if (this.$refs['Cascader1']) {
                this.$refs['Cascader1'].$refs.panel.activePath = []
            }
        } else {
            if (this.$refs['Cascader1']) {
                this.$refs['Cascader1'].$refs.panel.initStore()
            }
        }
    },
}
Copy the code