需缩少插槽 append 的 宽度
方法1、使用内联样式直接修改,指定 width 为 30px
<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
<style scoped lang="scss">
// 修改 el-input 插槽 append 的样式
::v-deep .el-input-group__append {
padding: 0;
width: 30px;
}
</style>
效果跟方法1设置的 30px 有些差异
再尝试 设置为 50px
<style scoped lang="scss">
// 修改 el-input 插槽 append 的样式
::v-deep .el-input-group__append {
padding: 0;
width: 50px;
}
</style>
这样就可以达到需求效果