如果你在使用 `
el-cascader` 组件时，需要在
切换 `
tab`
页时清空 `v-mod
el`，可以通过监听 `
tab`
切换事件，手动清空 `v-mod
el` 的值。
具体实现方法如下：
1. 在 `
el-
tabs` 组件中监听 `
tab-click` 事件，例如：
```html
<template>
<
el-
tabs @
tab-click="handle
TabClick">
<!--
tab 内容 -->
</
el-
tabs>
</template>
```
2. 在 `methods` 中定义 `handle
TabClick` 方法，清空 `v-mod
el` 的值，例如：
```js
methods: {
handle
TabClick(
tab) {
// 判断当前
tab 是否需要清空 v-mod
el
if (
tab.name === '需要清空的
tab 名称') {
this.$refs.cascader.clearS
elected(); // 清空 v-mod
el
}
}
}
```
注意，上面的代码中使用了 `this.$refs.cascader`，需要在 `
el-cascader` 组件上添加 `ref="cascader"` 属性。
完整代码示例：
```html
<template>
<div>
<
el-
tabs @
tab-click="handle
TabClick">
<
el-
tab-pane lab
el="
Tab 1" name="
tab1">
<!--
Tab 1 内容 -->
</
el-
tab-pane>
<
el-
tab-pane lab
el="
Tab 2" name="
tab2">
<!--
Tab 2 内容 -->
</
el-
tab-pane>
<
el-
tab-pane lab
el="
Tab 3" name="
tab3">
<
el-cascader ref="cascader"
v-mod
el="s
electedOptions"
:options="options"
:props="props"
:clearable="true"
:change-on-s
elect="true"
@change="handleCascaderChange"
/>
</
el-
tab-pane>
</
el-
tabs>
</div>
</template>
<script>
export default {
data() {
return {
s
electedOptions: [], //
el-cascader 的 v-mod
el
options: [], //
el-cascader 的 options
props: {} //
el-cascader 的 props
};
},
methods: {
handle
TabClick(
tab) {
if (
tab.name === '
tab3') {
this.$refs.cascader.clearS
elected(); // 清空 v-mod
el
}
},
handleCascaderChange(s
electedOptions) {
console.log(s
electedOptions); // 打印选择的选项
}
},
mounted() {
// 初始化
el-cascader 的 options 和 props
this.options = [
{
value: 'zhinan',
lab
el: '指南',
children: [
{
value: 'shejiyuanze',
lab
el: '设计原则',
children: [
{
value: 'yizhi',
lab
el: '一致'
},
{
value: 'fankui',
lab
el: '反馈'
},
{
value: 'xiaolv',
lab
el: '效率'
},
{
value: 'kekong',
lab
el: '可控'
}
]
},
{
value: 'daohang',
lab
el: '导航',
children: [
{
value: 'cexiangdaohang',
lab
el: '侧向导航'
},
{
value: 'dingbudaohang',
lab
el: '顶部导航'
}
]
}
]
}
];
this.props = {
value: 'value',
lab
el: 'lab
el',
children: 'children'
};
}
};
</script>
```
1351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
