解决方法:自己重写clearable功能
代码:
<el-input v-model="search.deptName" v-popover:equipSelect placeholder="请选择" readonly @mouseenter.native="enter" @mouseleave.native="leave" >
<span slot="suffix">
<i class="el-icon-circle-close" v-show="iconShow" @click="clearDataByIcon" style="margin-right: 5px;cursor: pointer;" />
</span>
</el-input>
<el-popover ref="equipSelect" placement="bottom-start" trigger="click" v-model="popoverShow" >
<!--下拉树-->
<deptSelect ref="deptSelect" @selectDept="selectDept" />
</el-popover>
data() {
return {
//查询条件
search:{
deptName:'',
deptId:'', // 部门id
startTime:'',
endTime:'',
},
iconShow: false,
};
},
methods: {
// 鼠标进入
enter(){
if (this.search.deptName){
this.iconShow = true;
this.$forceUpdate()
}
},
// 鼠标移出
leave(){
this.iconShow = false;
this.$forceUpdate()
},
// 点击输入框的×号,清空输入框中的内容
clearDataByIcon(){
this.search.deptId = '';
this.search.deptName = ''
// 重置下拉树
this.$refs.deptSelect.resetTreeNode()
this.$forceUpdate()
// 期望点击×号时,popover弹框不要弹出,但是点击弹框外的地方会触发popover显隐反转,所以应该设为true,而不是false
this.popoverShow = true
},
}
输入框绑定了popover弹框,所以在点击×号时,也要清除popover弹框里的内容,同时关闭popover