Vue使用Element的级联选择器Cascader清空事件

在Vue中使用Element UI的级联选择器Cascader组件时，如果需要清空选择的值，可以通过设置其v-model绑定的数据为空数组来实现。

以下是一个简单的例子：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    @clear="handleClear"
    clearable>
  </el-cascader>
  <el-button @click="clearCascader">清空级联选择器</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'option1',
          label: 'Option 1',
          children: [
            {
              value: 'child1',
              label: 'Child 1'
            }
          ]
        },
        {
          value: 'option2',
          label: 'Option 2',
          children: [
            {
              value: 'child2',
              label: 'Child 2'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleClear() {
      console.log('Cascader cleared');
    },
    clearCascader() {
      this.selectedOptions = []; // 清空选中项
    }
  }
};
</script>

在这个例子中，selectedOptions是绑定到el-cascader组件的v-model。通过点击按钮，触发clearCascader方法，将selectedOptions设置为空数组[]，从而实现清空级联选择器的效果。