先上效果圖:
效果爲:鼠標放到選擇城市菜單上彈出下一級城市菜單,點擊當前城市菜單則選中,並且選擇面板消失。
1、全局樣式修改,找到App.js加入以下樣式代碼:
/**
*以下樣式將單選框隱藏,並絕對定位與文字內容一樣大小,這樣點擊時可以點擊整行文字。
*/
<style lang="scss">
.el-cascader-panel .el-radio {
width: 132px;
height: 34px;
line-height: 34px;
padding: 0 10px;
z-index: 10;
position: absolute;
}
.el-cascader-panel .el-radio__input {
visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}
</style>
2、找到el-cascader組件使用的地方:
<template>
<el-form :model="formValue">
<el-form-item label="集團省市:">
<el-cascader
ref="cascader" // 必填
v-model="formValue.provinces"
placeholder="請選擇"
:options="options"
:props="{ checkStrictly: true, expandTrigger: 'hover' }" //必填
@change="cascaderChange" //必填
clearable
filterable
>
</el-cascader>
</el-form-item>
</el-form>
</template>
<script>
export default {
methods: {
cascaderChange(values) {
// 選擇之後將下拉界面收起
this.$refs.cascader.toggleDropDownVisible();
// 還可以獲取labels值
const labels = this.$refs.cascader.getCheckedNodes()[0].pathLabels;
console.log(values); // ["11", "1101", "110101", __ob__: Observer]
console.log(labels); // ["北京市", "北京市", "東城區", __ob__: Observer]
}
}
};
</script>