众所周知,Elementui的级联选择器里有清空选项按钮,但缺点和是下拉的icon放在同一个位置,于是产品就不乐意了,要求整改
目标效果如下图所示:
先说一下实现思路:
1.把组件自带的clearable禁用掉,然后给组件添加refs,步骤4会用到(见蓝色框);
2.用一个盒子包裹Cascader组件,然后在这个盒子里添加一个icon,然后使用子绝父相,调整好icon的位置(见红色框);
<div class="cascader_box">
<el-cascader
placeholder="必填"
ref="cascaderlabel"
v-on:change='selectHandle'
v-model="submitValue"
:options="departmentList"
:collapse-tags="true"
:clearable="false"
:props="casProps">
</el-cascader>
<i class="el-input__icon el-icon-circle-close clear_icon" v-on:click="clearCascader"></i>
</div>
<!-- 很想吐槽CSDN的缩进判断,每次贴代码都要调整半天 -->
3.调整CSS(至于为什么是原生CSS只能说这是个很老的项目了)使用:hover属性,当鼠标悬浮在包裹cascader组件的盒子时,清空图标显示。使用top和transform: translateY()以达到垂直居中效果:
.cascader_box{
position: relative;
}
.clear_icon{
font-size: 14px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 21px;
/* right不固定,可以慢慢调整到自己喜欢的位置 */
display: none;
color: #ccc;
}
.cascader_box:hover .clear_icon{
cursor: pointer;
display: block;
}
.el-input__inner{
width: 180px !important;
/* 宽度不固定,具体看需求 */
}
4.给icon添加一个v-on:click触发的函数,在函数里面调用清空方法,清空的代码我是上网查的,原文地址:element-ui cascader 重置按钮触发清空操作 - 不服憋着 - 博客园
// js
clearCascader(){
let obj = {}
obj.stopPropagation = () => {}
try{
this.$refs.cascaderlabel.clearValue(obj)
}catch(err){
this.$refs.cascaderlabel.handleClear(obj)
}
},
5.记得把$refs后面的名字改成自己在html里写的ref名字
大功告成,希望这篇文章能够帮到你。