Element UI Rate评分组件 (只读效果)

最新推荐文章于 2024-06-07 09:33:25 发布
最新推荐文章于 2024-06-07 09:33:25 发布
阅读量2.7k 收藏 6
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xx__ls/article/details/108130230
版权

Element UI Rate评分组件 (只读效果)

<el-table-column
    prop="grade"
    label="评级"
    sortable
    width="170">
<template slot-scope="{row}">
  <el-rate
      v-model="row.grade"
      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
      disabled
      show-score
      text-color="#ff9900">
  </el-rate>
</template>
</el-table-column>

在这里插入图片描述

在el-rate标签外面嵌套一层插槽template ，传递表格当前行的值，然后在v-model中绑定所需要的数据

  • v-model 绑定值
  • :colors 可以实现三种不同的颜色
  • disabled 只读
  • show-score 显示当前分数
  • text-color 当前分数的颜色

如果不是只读效果的话可以用change事件通过v-model双向绑定然后传值，但是这个还没试验过

Xx__ls
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Element Rate 评分的使用方法
10-15
Element Rate 评分组件是 Vue.js 框架中的一个常见组件，用于实现用户对内容的评价功能。在本文中，我们将深入探讨如何使用这个组件，以及它的各种配置选项和用法。 首先，基础的评分用法非常简单。例如，我们可以...
element ui select多选组件 重构
05-03
Element UI 是一个基于 Vue.js 的开源 UI 组件库，提供了丰富的界面组件，便于开发者构建美观且功能完善的 web 应用。在本项目中，我们关注的是 "select" 多选组件的重构，它是一个用于用户从多个选项中选择的交互...
el-rate 改变星星的大小和样式
徐三岁的博客
05-31 950
这意味着鼠标事件和触摸事件会穿透到元素的背后，但是如果元素有填充（例如背景颜色），鼠标事件和触摸事件将在遇到填充之前停止传播。这意味着鼠标事件和触摸事件会穿透到元素的背后，但是如果元素是不透明的，鼠标事件和触摸事件将在遇到元素之前停止传播。这意味着鼠标事件和触摸事件会穿透到元素的背后，但是如果元素有边框，鼠标事件和触摸事件将在遇到边框之前停止传播。visibleFill：元素对鼠标事件作出响应，但不会成为鼠标事件的目标。visible：元素对鼠标事件和触摸事件作出响应，但不会成为鼠标事件和触摸事件的目标。
elementUI组件只读或禁用
热门推荐
jizhou007的博客
01-21 1万+
elementUI组件只读或禁用 1.输入框的只读或禁用 <!--只读--> <el-form-input :readonly="true"></el-form-input> <!--禁用--> <el-form-input :disabled="true"></el-form-input> 2.select下拉框的禁用 <el-select :disabled="true"> </el-select> 3.
el-rate 用10分展示5星
SlyviaLau的博客
05-28 159
value1代表变量，如果要用其他分，则相对应的获取除数。
element-ui 设置input的只读或禁用
weixin_30835933的博客
09-03 5032
只读：readonly 在data里定义：readonly: true, 然后在input框里加上readonly就可以了。 禁用：disabled 在data里定义：edit: true, 然后在input框里加上：:disabled="edit"就可以了 转载于:https://www.cnblogs.com/knuzy/p/9579961.html...
ElementUI组件Rate(评分效果)的数据动态渲染
wind_linjie的博客
06-30 8728
首先通过此链接https://element.eleme.cn/#/zh-CN/component/rate 在官网上找到评分的实例，可以参照里面的组件属性、方法进行一系列的操作 以下我将一一展示rate评分的常用效果 <el-rate v-model="rateValue"//双向绑定数据 show-text//展示提示的文字 :texts="text"//自定义提示文字信息 allow-half//允许半选 @change="changeValue"//官网上
ElementUI: el-table中动态绑定el-rate
amadeus_liu2的博客
09-07 708
【代码】ElementUI: el-table中动态绑定el-rate。
Element el-rate 评分组件详解
程序员大阳
10-15 8677
本文目录1. 前言2. 基本用法3. 显示分值4. 辅助文本5. 只读6. 小结 1. 前言 评分组件主要使用在客户评价场景，例如客户对店铺进行打分。 本篇来介绍下评分组件的用法。 2. 基本用法 基本用法:{{value1}} <el-rate v-model="value1" @change="rateChange"> </el-rate> methods: { rateChange(value) { console.log(value
Element-UI Table组件上添加列拖拽效果实现方法
08-27
Element-UI Table 组件上添加列拖拽效果实现方法 在 Element-UI 中，Table 组件是一个功能强大的数据表格控件，但是在实际应用中，我们可能需要添加一些自定义的功能，例如添加列拖拽效果。下面我们将详细介绍如何...
vue element-ui table 组件封装使用
最新发布
06-07
在Vue.js开发中，Element UI库是一个非常受欢迎的前端组件库，它提供了丰富的UI组件，包括我们今天要讨论的Table组件。Table组件在实际项目中经常用于展示数据，但每个项目的需求可能各不相同，因此对其进行封装能...
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
018_rate评分
aihiao的专栏
02-15 891
1. rate评分 1.1. rate评分组件。 1.2. 评分属性 参数 说明 类型 默认值 value / v-model 绑定值 number 0 max 最大分值 number 5 disabled 是否为只读
山东大学软件学院项目实训第三周
xqwewq的博客
07-18 161
考试管理部分的前端主要需要对后端生成的试卷进行渲染展示到前端界面中，我们使用Vue对前端界面进行了渲染，使考试题目可以正常的展示到前端中。 下面是前端渲染的一些代码 <template> <div class="app-container"> <div class="filter-container"> <el-input v-model="listQuery.paperName" placeholder="搜索试卷名称" cleara
【vue】vxe-table用elementui的el-rate渲染评分的问题
m0_63834711的博客
11-19 548
本文就简单的把vxe-table插槽写法写出来。
el-table某一列动态绑定加载效果
aa754403560的博客
07-21 1744
当使用el-table时，如果有一列数据需要异步请求，并在等待该列数据的时候展示加载效果。可以通过scope.row.content_zh == null || scope.row.content_zh == ''来判断数据是否为空，如果为空此时v-loading=true。当拿到返回值后可以为scope.row.content_zh赋值，此时v-loading自动变为flase，取消加载效果。......
el-rate入门学习
qq_40765784的博客
06-02 1979
el-rate的入门使用和属性的概要说明
element-ui Rate组件源码分析整理笔记（十三）
weixin_30564901的博客
08-29 1021
Rate组件源码比较简单，有添加部分注释 main.vue <template> <!--valuenow当前的评分 valuetext当前显示的文本--> <div class="el-rate" @keydown="handleKey" role="slider" :aria-valuenow="current...
【区分vue2和vue3下的element UIRate 评分组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
06-07 574
在 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组件的详细比较和示例。
element-ui rate评分组件
04-11
b'element-ui rate\xe8\xaf\x84\xe5\x88\x86\xe7\xbb\x84\xe4\xbb\xb6'是一个评分组件，可以用于对某个物品或服务进行评分。该组件使用简单且功能齐全，可以设置图标、颜色、步长等属性来定制评分的显示效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值