可读的el-input点击按钮实现可输入

要实现可点击按钮的可输入的 el-input，可以使用 el-input 的 prepend 或 append 属性来添加需要的按钮元素。然后，通过设置 el-input 的 clearable 属性为 true，可以在输入框中添加一个清除按钮。

下面是一个示例代码，其中添加了一个搜索按钮和一个清除按钮：

<template>
  <el-input
    v-model="inputValue"
    placeholder="请输入内容"
    :clearable="true"
    append>
    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
    <el-button slot="append" icon="el-icon-circle-close" @click="clear"></el-button>
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    search() {
      // 处理搜索逻辑
    },
    clear() {
      this.inputValue = ''
    }
  }
}
</script>

在上面的代码中，我们将搜索按钮和清除按钮添加到了 el-input 的 append 插槽中。我们还定义了一个 inputValue 数据来双向绑定输入框的值，并在 search 和 clear 方法中处理搜索和清除的逻辑。

注意，我们设置了 el-input 的 clearable 属性为 true，以启用清除按钮的显示。