Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >el-select选中变色及百分比怎么做

el-select选中变色及百分比怎么做

作者头像
程序媛夏天
发布于 2024-01-18 13:21:43
发布于 2024-01-18 13:21:43
31700
代码可运行
举报
运行总次数:0
代码可运行
效果图:

选中后超过80%的显示红色,没有则显示黄色,没有百分比的不变颜色。

解决思路:

1.A思路:用的是获取dom节点,每切换一次就获取dom节点,然后给它变色;但是这样子的缺点就是有时候切换就会不显示颜色,这个原因是它捕获不到最新的dom节点。 2.B思路:用的vue里面的:class,并且就是设置一个变量,如果这个变量为true就是红色,否则就是false黄色,但是这样子不能正确显示百分比出来。 3.C思路:就是在外面蒙一层div,设置宽度和颜色为变量,定义一个函数,在改变下拉框的时候调用函数并且传入参数。

源代码:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <div class="stock-location">
          <el-form-item :label="$t('lang.intoStockLocation')" prop="shelvesSn">
            <div class="changeColor" style="position: relative;">
            //使用内联样式,在它的外面给它加个div盒子,设置两个变量:宽度和颜色
              <div
                :style="{
                  position: 'absolute',
                  backgroundColor: backgroundColorShelves,
                  width: backgroundWidthShelves + 'px',
                  height: '40px',
                  borderRadius: '5px'
                }"
              ></div>
              <el-select
                v-model="ruleForm.shelvesSn"
                class="shelfLocation"
                :placeholder="$t('lang.pleaseSelect')"
                @change="handleShelvesChange"
                popper-class="changeColor-select"
              >
                <el-option
                  :label="
                    item.shelvesUsage > 0
                      ? $t('lang.shelfUsage', {
                          shelf: item.shelvesSn,
                          usage: item.shelvesUsage
                        })
                      : item.shelvesSn
                  "
                  :value="item.shelvesSn"
                  v-for="(item, index) in shelvesList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div class="unit">{{ $t("lang.shielf") }}</div>
          </el-form-item>
       
          <el-form-item
            prop="shelvesLevel"
            :label="$t('lang.nth')"
            label-width="22px"
          >
            <div class="changeColor" style="position: relative;">
              <div
                :style="{
                  position: 'absolute',
                  backgroundColor: backgroundColor,
                  width: backgroundWidth + 'px',
                  height: '40px',
                  borderRadius: '5px'
                }"
              ></div>
              <Popover placement="top" :imageUrl="imgUrl" v-if="imgUrl">
                <el-select
                  v-model="ruleForm.shelvesLevel"
                  class="shelfLevel"
                  :placeholder="$t('lang.pleaseSelect')"
                  @change="handleLevelChange"
                  popper-class="changeColor-select"
                >
                  <el-option
                    :label="
                      item.usage > 0
                        ? $t('lang.levelUsage', {
                            level: item.level,
                            usage: item.usage
                          })
                        : item.level
                    "
                    :value="item.level"
                    v-for="(item, index) in levelList"
                    :key="index"
                  ></el-option>
                </el-select>
              </Popover>
              <el-select
                v-else
                v-model="ruleForm.shelvesLevel"
                class="shelfLevel"
                :placeholder="$t('lang.pleaseSelect')"
                @change="handleLevelChange"
              >
                <el-option
                  :label="
                    item.usage > 0
                      ? $t('lang.levelUsage', {
                          level: item.level,
                          usage: item.usage
                        })
                      : item.level
                  "
                  :value="item.level"
                  v-for="(item, index) in levelList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div class="unit">{{ $t("lang.level") }}</div>
          </el-form-item>
        </div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
export default {
data(){
  return {
    //定义变量给它一个默认值
      backgroundColorShelves: "white",//货架编号
      backgroundWidthShelves: 0,
      backgroundColor: "white",//货架层级
      backgroundWidth: 0,
    
  }
},

//定义变颜色以及宽度变化的方法
//改变货架编号
 updateStyleShelves(percentage1, percentage2) {
    //为什么设置202是因为输入框的宽度是202
      this.backgroundWidthShelves = 202 * percentage1;
      this.backgroundColorShelves = percentage1 > 0.8 ? "#ffe2e2" : "#fff0e0";
      this.backgroundWidth = 202 * percentage2;
      this.backgroundColor = percentage2 > 0.8 ? "#ffe2e2" : "#fff0e0";
    },
    
//改变货架层级
    updateStyle(percentage) {
      this.backgroundWidth = 202 * percentage;
      this.backgroundColor = percentage > 0.8 ? "#ffe2e2" : "#fff0e0";
    },
    
 //改变货架编号的方法       
  handleShelvesChange(item) {
      //定义一个选中的货架
      const selectedShelf = this.shelvesList.filter(
        ele => ele.shelvesSn === item //item为货架编号
      );
      if (selectedShelf && selectedShelf.length > 0) {
        //监控层
        this.levelList = selectedShelf[0].floors || [];
        this.shelvesUsePercentage = Number(selectedShelf[0].shelvesUsage) / 100;
        this.ruleForm.shelvesLevel = this.levelList.length > 0 ? 1 : "";
        this.defaultlevelUsePercentage = Number(this.levelList[0].usage) / 100; //选择货架编号的默认第一个的货架的百分比
        // console.log("123",this.shelvesUsePercentage, this.defaultlevelUsePercentage)
        //调用变色的方法,将货架编号百分比以及货架层数百分比传进去
        this.updateStyleShelves(
          this.shelvesUsePercentage,
          this.defaultlevelUsePercentage
        );
         }
      this.checkSelectedShelves();
    },
    
 //改变货架层级的方法   
  handleLevelChange(val) {
      this.defineUsagePercentAndImageUrl(val);
      this.updateStyle(this.levelUsePercentage);
  }
 </script>

第一种思路重现: (从代码上来看逻辑没有问题,但是获取不到最新的dom节点,这就导致了bug)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
handleShelvesChange(item) {
      //定义一个选中的货架
      const selectedShelf = this.shelvesList.filter(
        ele => ele.shelvesSn === item
      );
      if (selectedShelf && selectedShelf.length > 0) {
       //监控层
        this.levelList = selectedShelf[0].floors || [];
        this.shelvesUsePercentage = Number(selectedShelf[0].shelvesUsage) / 100;
        this.ruleForm.shelvesLevel = this.levelList.length > 0 ? 1 : "";
        if (this.ruleForm.shelvesLevel) {
          this.defineUsagePercentAndImageUrl(this.ruleForm.shelvesLevel);
          // 插入背景色(货架层)
          if (this.isShowUsage) {
          //关键代码,他传的是选择器和百分比
            this.calculateSelectBackground(
              ".shelfLevel>.el-input",
              this.levelUsePercentage
            );
            // 插入背景色(货架)
            this.calculateSelectBackground(
              ".shelfLocation>.el-input",
              this.shelvesUsePercentage
            );
          }
        }
      }
      this.checkSelectedShelves();
    },
    changeCheckbox() {
      if (this.checked == false) {
        this.ruleForm.operateType = 0;
      } else {
        this.ruleForm.operateType = 2;
      }
    },
    // 用js向下拉选择框插入背景色百分比进度条
    calculateSelectBackground(selector, percentage) {
      console.log(selector, percentage);
      let dom = document.querySelector(selector);
      if (dom) {
        let lastDom = document.querySelector(`${selector}>div`);
        if (lastDom) {
          dom.removeChild(lastDom);
        }
        console.log(selector, percentage, 2);
        let domHeight = dom.offsetHeight - 2;
        let domWidth = dom.offsetWidth * percentage;
        let newDom = document.createElement("div");
        console.log(domHeight, domWidth, percentage, 3);
        //这样的写法
        newDom.style = `
          width: ${domWidth}px;
          height: ${domHeight}px;
          background: ${percentage > 0.8 ? "#ffe2e2" : "#fff0e0"};
          position: absolute;
          border-radius:4px;
          opacity:0.5;
          bottom:0px;
        `;
        dom.insertBefore(newDom, dom.children[0]);
      }
    },
    destroyDom(selector) {
      let dom = document.querySelector(selector);
      let lastDom = document.querySelector(`${selector}>div`);
      if (lastDom) {
        dom.removeChild(lastDom);
      }
    },
    handleLevelChange(val) {
      this.ruleForm.shelvesLevel = val;
      this.defineUsagePercentAndImageUrl(val);
      this.checkSelectedShelves();
      // console.log(this.isShowUsage);
      if (this.isShowUsage) {
        this.calculateSelectBackground(
          ".shelfLevel>.el-input",
          this.levelUsePercentage
        );
      } else {
        this.calculateSelectBackground(".shelfLevel>.el-input", 0);
      }
    },
    defineUsagePercentAndImageUrl(val) {
      const selectedItem = this.levelList.filter(item => item.level === val)[0];
      this.levelUsePercentage = Number(selectedItem.usage) / 100;
      this.imgUrl = selectedItem.url;
      this.isShowUsage = selectedItem.usage > 0; //图片对否显示:false不显示,true显示
    },
   checkSelectedShelves() {
      if (this.selectedShelvesList.length > 0) {
        const selectedShelf = this.selectedShelvesList.filter(
          item =>
            item.shelvesSn === this.ruleForm.shelvesSn &&
            item.shelvesLevel === this.ruleForm.shelvesLevel
        );
        if (selectedShelf.length > 0) {
          this.selectedShelvesList.forEach((elem, idx) => {
            if (
              selectedShelf[0].shelvesLevel === elem.shelvesLevel &&
              selectedShelf[0].shelvesSn === elem.shelvesSn
            ) {
              this.mouseIndex = idx;
              this.isSelectShow = true;
            }
          });
        } else {
          this.mouseIndex = -1;
          this.isSelectShow = false;
        }
      }
    },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue使用 Object.assign()巧妙重置data数据
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。 Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
程序媛夏天
2024/01/18
1.4K0
vue使用 Object.assign()巧妙重置data数据
el-select二级联动效果-摄像头
需求:改变货架编号,显示出对应的监控层数。 并且初次渲染的时候,也要展示货架编号的对应监控层列表。
程序媛夏天
2024/01/18
2170
el-select二级联动效果-摄像头
ElementUI Form 表单
Form 表单由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据
py3study
2021/01/06
2.8K0
ElementUI Form 表单
vue提交select下拉框选中的值
王小婷
2025/05/20
1320
vue提交select下拉框选中的值
vue的select下拉框多选项-multiple属性
最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了,用的时候只需要把源码拿出来修改修改,也就成了。
王小婷
2020/09/03
10.6K0
vue提交select下拉框选中的值
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。
王小婷
2021/11/24
5.9K0
vue提交select下拉框选中的值
Element Form表单含有嵌套的数据校验
官网的例子 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="regio
tianyawhl
2020/04/08
3.3K0
设计Element UI表单组件居然如此简单!
上文讲解了Jest框架对组件库测试,TypeScript和Jest都为代码质量和研发效率。之前实现Container和Button组件以渲染功能为主,可根据不同属性渲染不同样式去实现布局和不同格式的按钮。
JavaEdge
2024/12/29
6030
设计Element UI表单组件居然如此简单!
我在实际项目开发中遇到的关于ElementUI各种表单验证
第一种 最简单的必填字段 <el-form-item label="委托方" prop="real_operator_id" > <operators-select v-model="
FinGet
2020/02/12
3.8K0
【VIDEO_Parent】-创作者前端-添加创作者
程序员NEO
2023/11/30
2080
【VIDEO_Parent】-创作者前端-添加创作者
Element表单验证
要加验证之前一定要确保已经写了 prop 属性,该属性是跟 rule 绑定在一起的,也可以在行内单独制定 rules。
leader755
2022/03/09
3.9K0
微服务项目:尚融宝(38)(核心业务流程:申请借款额度(1))
step1:用户在个人中心点击 “立即借款”  (http://localhost:3000/user/borrower)
一个风轻云淡
2022/11/15
4800
微服务项目:尚融宝(38)(核心业务流程:申请借款额度(1))
如何实现两个下拉选择框 select选中联动效果?
某一个页面,上面是查询项,下面是列表。查询项中有两个下拉选择框,都是查询条件。这两个选择框是父子级的关系。当我选中第一个选择框某一项时,第二个选择框的下拉项会发生变化;当选择第二个选择框的某一项时,需要回填第一个选择框的值。
喵喵侠
2024/06/12
1.7K1
如何实现两个下拉选择框 select选中联动效果?
vue的修饰符!sync和el-dialog弹窗组件
父组件 index.vue: <template> <info :value="myValue" @valueChanged="e => myValue = e"></info> </template> <script> inport info from './info.vue'; export default { components: { info, }, data() { return {
leader755
2022/03/09
8050
补档 后端开发日常:国家电网CMS系统
在我上一个 WordPress 博客中写过,后来这个服务器拿去做 Springboot 测试之后数据库就炸了,然后也没备份,文章就全没了。所以这是一期补档!
DioxideCN
2022/08/05
9600
补档 后端开发日常:国家电网CMS系统
vue表格分页以及增删改查的实际应用
效果 1:表格以及分页 2:增加一条数据 3:删除一条数据 4:修改一条数据 5:查询一条数据 实例: <template> <div class="tab-container"> <d
王小婷
2021/03/17
1.9K0
从零开始做网站9-Springboot+vue简单的增删改查功能
因为很久没写过vue了,而且3.0还是第一回接触,所以一边学习一边做,进度还是稍慢的
sunonzj
2022/06/21
1.3K0
从零开始做网站9-Springboot+vue简单的增删改查功能
ElementUI——elementui2.0表格支持render渲染
当前项目基于vue2.0+elementui来实现的,所以简单封装一个表格支持render函数来自定义渲染;
思索
2024/08/15
1860
ElementUI——elementui2.0表格支持render渲染
【学生管理系统】班级管理
<template>  <el-card class="classes-add-card">    <el-form ref="form" :model="classes" label-width="100px">      <el-form-item label="班级ID">        <el-input v-model="classes.cid"></el-input>      </el-form-item>      <el-form-item label="班级名称">        <el-input v-model="classes.cname"></el-input>      </el-form-item>      <el-form-item label="选择老师">        <el-select v-model="classes.teacherIds" multiple placeholder="请选择老师" style="width: 100%">          <el-option v-for="(teacher,index) in teacherList" :key="index" :label="teacher.tname" :value="teacher.tid"></el-option>        </el-select>      </el-form-item>      <el-form-item label="授课老师">      </el-form-item>      <el-form-item label="助理老师">      </el-form-item>      <el-form-item label="辅导员老师">      </el-form-item>      <el-form-item>        <el-button type="primary">添加</el-button>        <el-button>重置</el-button>      </el-form-item>    </el-form>    {{classes}}  </el-card> </template> ​ <script> export default {  data() {    return {      classes: {        teacherIds: []      //选择的所有老师     },      teacherList: [],      //老师列表   } },  methods: {    async findAllTeacher() {      let { data:baseResult } = await this.$axios.get('/classes-service/teacher')      // 获得结果      this.teacherList = baseResult.data   } },  mounted() {    //查询所有的老师    this.findAllTeacher() }, } </script> ​ <style>  .classes-add-card {    width: 500px; } </style>
陶然同学
2023/02/24
3K0
【学生管理系统】班级管理
后台数据管理系统 - 项目架构设计【黑马程序员】
在线演示:https://fe-bigevent-web.itheima.net/login
HelloWorldZ
2024/03/20
1.3K0
后台数据管理系统 - 项目架构设计【黑马程序员】
相关推荐
vue使用 Object.assign()巧妙重置data数据
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档