如何在el-input里面放按钮

在Element UI库中，`el-input`主要用于输入文本，它本身并不支持直接放置按钮。不过，你可以通过结合其他组件如 `el-button` 和 `el-form-item` 来实现在输入框旁边显示按钮的功能。

下面是一个基本示例：

<template>
  <el-form-item label="用户名">
    <!-- 输入框 -->
    <el-input placeholder="请输入用户名"></el-input>

    <!-- 按钮 -->
    <el-button type="primary">保存</el-button>
  </el-form-item>
</template>

在这个例子中，我们使用了 `<el-form-item>` 组件包裹了 `<el-input>` 和 `<el-button>`，使得它们作为同一个小部件展示出来，并且保持了一致的布局样式。

### 相关问题 - 实现步骤

1. **添加表单元素**：首先需要引入 `el-form-item`、`el-input` 和 `el-button` 组件到你的项目中。

   <script setup lang="ts">
   import { ElFormItem, ElInput, ElButton } from 'element-plus';
   </script>

2. **定义模板结构**：将输入框和按钮放入 `<el-form-item>` 标签内，并分别定义标签内的内容。

   <el-form-item label="用户名">
     <el-input placeholder="请输入用户名"></el-input>
     <el-button type="primary">保存</el-button>
   </el-form-item>

3. **样式自定义**：根据需求调整按钮和其他元素的样式，可以利用Element UI的内置样式或是自定义CSS类。

   .your-custom-class {
     /* 添加自定义样式 */
   }

通过上述步骤，你可以在El-Input组件内部有效地添加并定位按钮，同时保持整体界面的一致性和专业外观。