elementui选择器前后图标删除

要在 ElementUI 的选择器中添加前后图标删除功能，可以使用 ElementUI 提供的 Input 组件，并结合自定义样式和事件处理来实现。下面是一个示例代码：

<template>
  <div>
    <el-input
      v-model="inputValue"
      :suffix-icon="showClearIcon ? 'el-icon-circle-close' : ''"
      @focus="handleFocus"
      @blur="handleBlur"
      @clear="handleClear"
    ></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showClearIcon: false,
    };
  },
  methods: {
    handleFocus() {
      this.showClearIcon = this.inputValue !== '';
    },
    handleBlur() {
      this.showClearIcon = false;
    },
    handleClear() {
      this.inputValue = '';
    },
  },
};
</script>

<style>
.el-icon-circle-close {
  cursor: pointer;
}
</style>

在上面的代码中，我们使用了 `el-input` 组件作为选择器，在 `v-model` 中绑定了输入值 `inputValue`。通过设置 `suffix-icon` 属性，可以在输入框的后面添加一个图标。

当输入框获得焦点时，通过 `@focus` 事件处理函数 `handleFocus` 来判断是否需要显示清除图标。当输入框失去焦点时，通过 `@blur` 事件处理函数 `handleBlur` 来隐藏清除图标。

在输入框的后面图标被点击时，通过 `@clear` 事件处理函数 `handleClear` 来清空输入框的值。

最后，通过自定义样式 `.el-icon-circle-close` 来设置清除图标的样式，例如设置鼠标指针为指针形状，以提供交互性。

请注意，上面的代码只是一个示例，你可以根据自己的需求进行修改和扩展。希望对你有帮助！