vue cascader 点击两次回显解决代码
时间: 2024-03-05 22:50:32 浏览: 122
解决vue 按钮多次点击重复提交数据问题
好的,以下是一个简单的解决方案,可以尝试在 `change` 事件上添加延迟处理:
```
<template>
<el-cascader :options="options" v-model="selected" @change="handleChange"></el-cascader>
</template>
<script>
export default {
data() {
return {
options: [], // 级联数据
selected: [], // 已选中的值
timer: null // 延迟处理的计时器
}
},
methods: {
/**
* 延迟处理级联选择器的 change 事件
*/
handleChange() {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
// 处理选中的值
console.log(this.selected)
}, 300)
}
}
}
</script>
```
在上面的代码中,我们使用了一个计时器来延迟处理 `change` 事件,避免了因为点击两次而导致的回显问题。您可以根据实际情况调整延迟时间,使其适配您的项目。
阅读全文