el-button 里的 slot用法

HZM_CSDN

于 2022-11-10 16:56:23 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/HZM_CSDN/article/details/127792109

本文介绍了Vue框架中<el-button>组件的slot属性，如`append`和`prepend`，它们用于定义按钮在依赖组件内的位置。`append`表示将按钮放置在输入框后面，而`prepend`则将其置于前面。示例代码展示了如何在<el-form-item>中使用<el-input>和<el-button>，并利用slot属性实现搜索功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-button slot="append"></el-button> 里的 slot="append" 就是一个UI摆放的位置,其实就是封装的样式布局。

append：代表放在紧贴在依赖组件的后面

prepend：代表放在紧贴在依赖组件的前面

<el-form-item :label="$t('materialStock.materialName')">
                  <el-input v-model="condition.materialName"  clearable >
                    <el-button slot="append" icon="el-icon-search" @click.native="openDialog"></el-button>
                  </el-input>
                </el-form-item>