实现以上效果,下拉框、slider滑块、按钮都在同一行,设置flex布局后,发现silider滑块最右边的标记数字一直都如下竖着显示,后来通过给源组件的标记区.el-slider__marks-text增加一个宽度后解决该问题。
<template>
<div>
<div v-for="(item, index) in storageQuota">
<div class="pool-item">
<div style="width: 30%">
<el-select v-model="item.storagePoolId" size="small" placeholder="请选择" @change="changePool(item)">
<el-option
v-for="el in poolType"
:key="el.value"
:label="el.label"
:value="el.value">
</el-option>
</el-select>
</div>
<div style="width: 55%">
<el-slider v-model="item.size" :min=0 :max=item.poolIdleSize :marks="getMarks(item.poolIdleSize)" show-input></el-slider>
</div>
<div style="width: 10%">
<el-button size="small" type="danger" @click="deletes(index)"><i class="el-icon-delete"></i>删除</el-button>
</div>
</div>
</div>
<el-button type="primary" size="small" @click="add"><i class="el-icon-plus"></i>点击添加</el-button>
</div>
</template>
.pool-item {
display: flex;
justify-content: space-between;
margin-bottom: 17px;
}
::v-deep .el-slider__marks-text {
width: 60px;
text-align: center;
}