el-input自定义button readonly clearable同时存在

自定义input按钮且readonly和clearable共存

<el-input v-model="form.customer" placeholder="请选择" readonly>
  <template #suffix>
      <i class="el-icon-close" style="margin-left: 5px;cursor: pointer;" v-show="form.customer" @click="btnClearable"></i>
      <el-button @click="changeClick" :disabled="!form.region" style="border: none" type="text">选择客户</el-button>
  </template>
</el-input>

methods: {
  btnClearable(){
     this.form.customer = ''
  },
  changeClick(){
    this.customerDialog = true
  },
}

<style lang="scss" scoped>
  .el-icon-close:before {
      content: "\E78D";
  }
</style>

效果图：
企业微信截图_17253307495966.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容