日常开发中,发现级联选择器如果设置为任意级别可选后,无法自动关闭,用户体验极差,所以封装了下。
// 关闭级联选择器
this.$refs.cascaderHandle.dropDownVisible = false
完整代码:
<template>
<div class="white-body-view">
<el-cascader ref="cascaderHandle" v-model="value" :props="{ checkStrictly: true }" :options="options" @change="closeCascader" />
</div>
</template>
<script>
export default {
data() {
return {
options: [],
value: ''
}
},
created() {
this.initData()
},
methods: {
initData() {
const data = [
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: []
}, {
value: 'daohang',
label: '导航',
children: []
}]
},
{
value: 'ziyuan',
label: '资源',
children: []
}]
// 格式化数据源
this.options = this.formatData(data)
},
formatData(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
data[i].children = undefined
} else {
this.formatData(data[i].children)
}
}
return data
},
closeCascader() {
this.$refs.cascaderHandle.dropDownVisible = false
}
}
}
</script>