一、开启 checkStrictly : true, 允许选择任意一级节点,
然后开启鼠标移动触发 expandTrigger: 'hover'
再添加一个ref="cascaderHandle"
,并且在@change方法里 this.$refs.cascaderHandle.dropDownVisible = false;这样选中后就可以关闭下拉框
<el-cascader
ref="cascaderHandle"
placeholder="请选择商品类目"
:props="defaultParams"
v-model="categoriess"
:options="categoriesList"
clearable
@change="handleChange">
<span slot-scope="{data}" @click="clickNode">{{ data.categoryName }}</span>
</el-cascader>
data() {
return {
defaultParams: {
expandTrigger: 'hover',
label: 'categoryName',
value: 'id',
children: 'childList',
checkStrictly : true,
expandTrigger: 'hover'
}
}
methods: {
clickNode($event) {
$event.target.parentElement.parentElement.firstElementChild.click();
}
//选择器选中触发事件
handleChange() {
const index = this.categoriess.length-1;
this.form.parentId = this.categoriess[index];
this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
console.log(this.form.parentId);
}
}
二、实现点击文字触发选中事件,加一个插槽,绑定一个函数即可
<span slot-scope="{data}" @click="clickNode">{{ data.categoryName }}</span>
methods: {
clickNode($event) {
$event.target.parentElement.parentElement.firstElementChild.click();
}
}
三、隐藏el-radio小圆点的样式
<style lang="scss">
.el-cascader-panel .el-radio{
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 10px;
right: 10px;
}
.el-cascader-panel .el-radio__input{
visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix{
top: 10px;
}
</style>