修改插槽样式，el-input 插槽 append 的样式

BillKu2024-11-29 15:12

需缩少插槽 append 的宽度

方法1、使用内联样式直接修改，指定 width 为 30px

html 复制代码

                <el-input v-model="props.applyBasicInfo.outerApplyId" :disabled="props.operateCommandType === 'input-modify'">
                  <template #append>
                    <el-button @click="onGenerateClick()" style="padding: 0;width: 30px;">Max</el-button>
                  </template>
                </el-input>

方法2、打开页面，选择该元素，获取类名为 el-input-group__append

修改该类 el-input-group__append 的样式，指定 width 为 30px

css 复制代码

<style scoped lang="scss">
  // 修改 el-input 插槽 append 的样式
  ::v-deep .el-input-group__append {
    padding: 0;
    width: 30px;
  }
</style>

效果跟方法1设置的 30px 有些差异

再尝试设置为 50px

css 复制代码

<style scoped lang="scss">
  // 修改 el-input 插槽 append 的样式
  ::v-deep .el-input-group__append {
    padding: 0;
    width: 50px;
  }
</style>

这样就可以达到需求效果