<template>
<div class='cascaderRecovery'>
<el-cascader
v-model="value"
:options="options"
ref="cascaderRef"
@visible-change="handleVisibleChange"
clearable>
</el-cascader>
</div>
</template>
<script>
export default {
name: 'cascaderRecovery',
data () {
return {
value: [],
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: '顶部导航'
}]
}]
}, {
el-cascader重置级联面板
最新推荐文章于 2024-05-18 08:30:00 发布
本文详细介绍了如何在Vue项目中,针对el-cascader组件实现选择项的重置,确保级联面板回到初始状态。通过监听input事件和调用clearValue方法,可以有效地清除已选值,达到重置效果。
摘要由CSDN通过智能技术生成