关于ElementUI Rate评分组件 改变”Value“ 值组件却并不重新渲染的问题

最新推荐文章于 2023-05-19 15:08:33 发布
最新推荐文章于 2023-05-19 15:08:33 发布
阅读量1k 收藏
点赞数
分类专栏： 报错记录 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44002943/article/details/121343432
版权

如下图 当楼主点击星星进行评分的时候无论是选择的四星还是五星 松开鼠标就会再次回到初始的一星
在这里插入图片描述
导致这个问题产生的是组件没有重新渲染
解决办法
this.$forceUpdate() //迫使组件重新渲染 我们手动让vue去渲染组件
在这里插入图片描述
OK! 问题完美解决 记录一下日常BUG

微澜·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【区分vue2和vue3下的element UI ¶Rate 评分组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
06-07 573
在 Vue 2 和 Vue 3 的上下文中，Element UI 和 Element Plus（Element UI 的 Vue 3 版本）都提供了el-rate评分组件。然而，由于 Vue 3 和 Element Plus 的出现，API 和使用方式可能会有所不同。以下是对 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中的el-rate组件的详细比较和示例。
ElementUI组件Rate(评分效果)的数据动态渲染
wind_linjie的博客
06-30 8723
首先通过此链接https://element.eleme.cn/#/zh-CN/component/rate 在官网上找到评分的实例，可以参照里面的组件属性、方法进行一系列的操作 以下我将一一展示rate评分的常用效果 <el-rate v-model="rateValue"//双向绑定数据 show-text//展示提示的文字 :texts="text"//自定义提示文字信息 allow-half//允许半选 @change="changeValue"//官网上
Element-Ui实现评分表，评分项，一个例子掌握table合并行和列，computed计算总分，某级分类的最大评分值，超详细！逐行注释。
TangBoBoa的博客
04-17 1378
起初接到这个需求的时候很苦恼，因为没有写过类似的内容，给了一个excel，让通过页面展示出来，最终还要填写分数，校验并存入到数据库中，刚开始想着是通过树状table展示，可是这样的话离图中效果差距很大，估计也是不能接收，下面就看看我是如何实现的吧。首先我们的数据库中是以id，pid形式存储的数据，最多分为四级评分项，在这个例子中不涉及到后台拼接数据的内容，只是前端编写的假数据进行展示，需要实现后端的小伙伴可以按照我的数据格式去用sql查询出对应的格式即可复用。
ElementUI更改Rate评分组件的图标大小以及评分最大值
智慧包的博客
03-24 8982
ElementUI提供的Rate评分组件的默认大小是这样的 图标太小了，尝试过设置宽高、行高、尺寸都没有用。于是打开浏览器调试，发现是用font-size设置的 于是在代码中给el-rate_icon改变font-size的值就可以了 这里注意这个class名是组件自带的，要在样式名称前加上/deep/提高优先级，不然不会生效 /deep/ .el-rate__icon{ font-size: 35px; } 设置完后，图标成功变大 ...
ElementUI Rate 评分
shykevin的博客
10-05 2506
一、概述 Rate 评分组件，官方链接：https://element.eleme.cn/#/zh-CN/component/rate 二、辅助文字 用辅助文字直接地表达对应分数 test.vue <template> <div style="width: 20%"> <el-rate v-model="value" show-...
仿制element-ui的Rate评分组件
前端老兵
07-02 3367
试着仿制了一下element-ui的Rate评分组件，废话不多说，直接上效果图上代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Rate评分，带辅助文字&lt;/title&gt; &lt;style&am
Element Rate 评分的使用方法
10-15
Element Rate 评分组件是 Vue.js 框架中的一个常见组件，用于实现用户对内容的评价功能。在本文中，我们将深入探讨如何使用这个组件，以及它的各种配置选项和用法。 首先，基础的评分用法非常简单。例如，我们可以...
微信小程序评分组件
03-29
微信小程序评分组件 wxapp multiple rate component (此图片来源于网络，如有侵权，请联系删除! ) 下载 git clone https://github.com/simsir-lin/multiple-rate-wxapp.git 预览 打开微信web开发者工具，'本地小程序...
:glowing_star:微信小程序评分组件
01-27
微信小程序评分组件:glowing_star: 下载 git clone https://github.com/simsir-lin/wechat-miniprogram-rate.git 使用 安装 npm install --save wechat-miniprogram-rate 在你的页面json中添加 { "usingComponents...
基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件
08-10
本项目"基于ElementUI二次封装的支持自适应列宽的table-column列组件"正是针对Element-UI的table组件进行了一次深度定制，以解决在数据展示过程中列宽自动适应的问题。 Element-UI的table组件在默认情况下，列宽...
基于Vue.js实现的面向金融场景的移动端UI组件库
最新发布
10-15
5. 特色组件：如股票走势（StockChart）、汇率转换（ExchangeRate）、贷款计算器（LoanCalculator）等，这些都是金融场景中特有的功能组件。 开发这样一个组件库，还需要遵循一定的设计原则和规范，比如Material ...
关于element-UI组件中评分无法修改大小的问题
weixin_45630345的博客
08-24 1088
在vue中的style设置scoped后，样式就只可在自己组件中使用，当要获取其他标签时，涉及到深度作用域和私有作用域的概念，可查阅其他资料学习。下面说一下评分的解决办法。 解决办法： 在class名前加/deep/就解决了。 /deep/ .el-rate__icon{ font-size: 10px; margin-right: 0; } ...
element-ui Rate组件源码分析整理笔记（十三）
weixin_30564901的博客
08-29 1019
Rate组件源码比较简单，有添加部分注释 main.vue <template> <!--valuenow当前的评分 valuetext当前显示的文本--> <div class="el-rate" @keydown="handleKey" role="slider" :aria-valuenow="current...
LayUI中的内置模块之 评分组件文档 - layui.rate
daimeijin的博客
08-15 771
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 评分组件文档 rate 评分组件在电商和 O2O 平台尤为常见，一般用于对商家进行服务满意度评价。外形依然小巧自然，功能依旧灵活实用。其中评分对应的自定义内容功能，可让它有更多的发挥空间。该组件为
【element-ui其他icon笑脸评分使用方法，官方文档踩坑】
丁东的博客
05-19 1143
评分组件，因项目使用默认的星星样式不太适合当前需求，遂用到了笑脸评分的这个自定义icon。再查看页面效果，笑脸就出现了。前提： 使用elemen的。把源码下载并解压按照路径。
【vue】vxe-table用elementui的el-rate渲染评分的问题
m0_63834711的博客
11-19 548
本文就简单的把vxe-table插槽写法写出来。
如何更改ElementUI组件的图标大小以及标签属性
热门推荐
m0_70015558的博客
06-14 1万+
话不多说，直接上菜。ElementUI提供的Rate评分组件的默认大小是这样的图标太小了，想设置宽高、行高、尺寸，但代码不起作用。
vue2 在element-ui的rate组件中，使用iconfont的图标
u010322890的博客
06-29 2931
利用element-ui的rate评分组件，替换形状
vue3+element-plus 动态rate评分（显示分数、允许半星）
新手必备
10-26 2079
vue3+element-plus 动态rate评分（显示分数、允许半星）
element-ui rate评分组件
04-11
b'element-ui rate\xe8\xaf\x84\xe5\x88\x86\xe7\xbb\x84\xe4\xbb\xb6'是一个评分组件，可以用于对某个物品或服务进行评分。该组件使用简单且功能齐全，可以设置图标、颜色、步长等属性来定制评分的显示效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值