el-cascader 怎么在切换tab页是清空 v-model

如果你在使用 `el-cascader` 组件时，需要在切换 `tab` 页时清空 `v-model`，可以通过监听 `tab` 切换事件，手动清空 `v-model` 的值。

具体实现方法如下：

1. 在 `el-tabs` 组件中监听 `tab-click` 事件，例如：

<template>
  <el-tabs @tab-click="handleTabClick">
    <!-- tab 内容 -->
  </el-tabs>
</template>

2. 在 `methods` 中定义 `handleTabClick` 方法，清空 `v-model` 的值，例如：

methods: {
  handleTabClick(tab) {
    // 判断当前 tab 是否需要清空 v-model
    if (tab.name === '需要清空的 tab 名称') {
      this.$refs.cascader.clearSelected();  // 清空 v-model
    }
  }
}

注意，上面的代码中使用了 `this.$refs.cascader`，需要在 `el-cascader` 组件上添加 `ref="cascader"` 属性。

完整代码示例：

<template>
  <div>
    <el-tabs @tab-click="handleTabClick">
      <el-tab-pane label="Tab 1" name="tab1">
        <!-- Tab 1 内容 -->
      </el-tab-pane>
      <el-tab-pane label="Tab 2" name="tab2">
        <!-- Tab 2 内容 -->
      </el-tab-pane>
      <el-tab-pane label="Tab 3" name="tab3">
        <el-cascader ref="cascader"
          v-model="selectedOptions"
          :options="options"
          :props="props"
          :clearable="true"
          :change-on-select="true"
          @change="handleCascaderChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],  // el-cascader 的 v-model
      options: [],  // el-cascader 的 options
      props: {}  // el-cascader 的 props
    };
  },
  methods: {
    handleTabClick(tab) {
      if (tab.name === 'tab3') {
        this.$refs.cascader.clearSelected();  // 清空 v-model
      }
    },
    handleCascaderChange(selectedOptions) {
      console.log(selectedOptions);  // 打印选择的选项
    }
  },
  mounted() {
    // 初始化 el-cascader 的 options 和 props
    this.options = [
      {
        value: 'zhinan',
        label: '指南',
        children: [
          {
            value: 'shejiyuanze',
            label: '设计原则',
            children: [
              {
                value: 'yizhi',
                label: '一致'
              },
              {
                value: 'fankui',
                label: '反馈'
              },
              {
                value: 'xiaolv',
                label: '效率'
              },
              {
                value: 'kekong',
                label: '可控'
              }
            ]
          },
          {
            value: 'daohang',
            label: '导航',
            children: [
              {
                value: 'cexiangdaohang',
                label: '侧向导航'
              },
              {
                value: 'dingbudaohang',
                label: '顶部导航'
              }
            ]
          }
        ]
      }
    ];
    this.props = {
      value: 'value',
      label: 'label',
      children: 'children'
    };
  }
};
</script>