实现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;
}
相关推荐
gqkmiss7 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃12 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰17 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye23 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm25 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互