实现Slider 滑块组件标记动态变化

实现以上效果,下拉框、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;
}
相关推荐
毕业设计制作和分享12 分钟前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf2 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨2 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL2 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1113 小时前
css实现div被图片撑开
前端·css
薛一半3 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾3 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage4 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发4 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火4 小时前
Web Components 是什么
前端·web components