当前位置：首页 > news >正文

【vue】el-select选择器实现宽度自适应

news 来源：原创 2024/9/30 3:20:58

选择器的宽度根据内容长度进行变化

<div class="Space_content"><el-selectv-model="value":placeholder="$t('bot.roommessage')"class="select"size="small"style="margin-right: 10px"@change="selectchange"><template slot="prefix"><span style="margin-right: 10px; font-weight: 600">{{ $t("bot.state") }}：</span><span style="visibility: hidden">{{ (options.find((s) => s.value === value) || {}).label }}</span></template><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</div>

<style lang="scss">.Space_content {.select {min-width: 100px;.el-input__inner {text-align: right;border: none;background-color: transparent;font-weight: 600;padding-left: 15px;padding-right: 25px;}&:hover {background-color: rgba(46, 46, 56, 0.08);border-radius: 5px;cursor: pointer;}.el-icon-arrow-up:before {content: "\e78f";color: #000;}.el-input__suffix {top: -2px;right: 0;}.el-input__prefix {position: relative;left: 0px;box-sizing: border-box;// border: 1px solid #ffffff00;width: auto;padding: 0 30px 0 10px;height: 32px;line-height: 35px;// visibility: hidden;}input {position: absolute;}}.el-input {width: auto !important;}
}
</style>

其中css中的.el-input { width: auto !important; }，是因为选择器后面还有一个搜索框，如果不写这个，会出现问题。

其中$t("bot.state")是用国际化的方式呈现的，固定的内容，如果你没有就把他去掉就行，下面是去掉的样子

<div class="Space_content"><el-selectv-model="value":placeholder="$t('bot.roommessage')"class="select"size="small"style="margin-right: 10px"@change="selectchange"><template slot="prefix">{{ (options.find((s) => s.value === value) || {}).label }}</template><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</div>

<style lang="scss">.Space_content {.select {min-width: 100px;.el-input__inner {border: none;background-color: transparent;font-weight: 600;padding-left: 15px;padding-right: 20px;}&:hover {background-color: rgba(46, 46, 56, 0.08);border-radius: 5px;cursor: pointer;}.el-icon-arrow-up:before {content: "\e78f";color: #000;}.el-input__suffix {top: -2px;right: 0;}.el-input__prefix {position: relative;left: 0px;box-sizing: border-box;padding: 0 30px;height: 32px;line-height: 35px;visibility: hidden;}input {position: absolute;}}.el-input {width: auto !important;}
}
</style>