实现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;
}
相关推荐
lilu888888836 分钟前
AI代码生成器赋能房地产:ScriptEcho如何革新VR/AR房产浏览体验
前端·人工智能·ar·vr
LCG元39 分钟前
Vue.js组件开发-实现对视频预览
前端·vue.js·音视频
阿芯爱编程1 小时前
vue3 react区别
前端·react.js·前端框架
烛.照1031 小时前
Nginx部署的前端项目刷新404问题
运维·前端·nginx
YoloMari1 小时前
组件中的emit
前端·javascript·vue.js·微信小程序·uni-app
浪浪山小白兔2 小时前
HTML5 Web Worker 的使用与实践
前端·html·html5
疯狂小料2 小时前
React 路由导航与传参详解
前端·react.js·前端框架
追光少年33223 小时前
Learning Vue 读书笔记 Chapter 2
前端·javascript·vue.js·vue3
前端熊猫3 小时前
JavaScript 的 Promise 对象和 Promise.all 方法的使用
开发语言·前端·javascript
iOS阿玮4 小时前
速领🧧!iOS研究院专属「红包封面」来了,第二弹。
前端