input输入框readonly与clearable不共存，但是又同时需要两者

解决方法：自己重写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