Cascader- Multi-select mode, where the small button is removed to get the getCheckedNodes problem

Problem description

  1. There are two delete buttons in the picture
  2. There was a problem getting getCheckedNodes when deleting data using the arrow 1 delete button or focusing on the Backspace button on the keyboard
  3. Using arrow 2 in the figure, clear and expand select Delete, no problem

Show the code

<el-form-item label="Commodity Classification">
    <el-cascader class="cascader" ref="cascader" v-model="categoryId" :options="category"
        :props="{ label:'label', value:'id', multiple: true }" placeholder="Please select" filterable
        clearable separator=">" collapse-tags @change="spflChange" style="width:300px;">
    </el-cascader>
</el-form-item>
Copy the code

The solution

methods:{
    spflChange (item) {
        var nodes = this.$refs['cascader'] &&this.$refs['cascader'].$refs.panel.getCheckedNodes()
        console.log('item',item)
        console.log('nodes1',nodes) // The nodes are not up to date
        // The solution
        this.$nextTick(_= >{
            console.log('nodes2',nodes) // Print the latest value here}}})Copy the code