Element-UI Cascader组件 清除按钮位置的修改

众所周知，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名字

 大功告成，希望这篇文章能够帮到你。