element 如何渲染star评分

效果图

html数据绑定位置

<el-table-columnlabel="分数"width="120"><template slot-scope="{row}"><i :style="item.color"  v-for="(item,index) in setStar(row.evalStar)" :key="index" :class="item.value"></i></template></el-table-column>

表格数据
评分为 evalStar

DataList:[{id:1,teacher:'张毅',tel:1544547416,evalPerson:'王大锤',evalStar:4,evalText:['技术一般','脾气差',],content:'一般般！',show:false,evalTime:'2019-06-30 11:20'},{id:1,teacher:'张毅',tel:1544547416,evalPerson:'王大锤',evalStar:3,evalText:['技术一般','脾气差',],content:'一般般！',show:false,evalTime:'2019-06-30 11:20'},{id:1,teacher:'张毅',tel:1544547416,evalPerson:'王大锤',evalStar:1,evalText:['技术一般','脾气差',],content:'一般般！',show:false,evalTime:'2019-06-30 11:20'},{id:1,teacher:'张毅',tel:1544547416,evalPerson:'王大锤',evalStar:"5",evalText:['技术一般','脾气差',],content:'一般般！',show:false,evalTime:'2019-06-30 11:20'},],

评分字段处理JS

setStar(data){var arr=[];if(data == 0){for(var i=1;i<6;i++) {arr.push({index:i,value:'el-icon-star-off',});if(i+1 == data) return arr;}}else {for(var i=1;i<6;i++) {if(i > data) {arr.push({index:i,value:'el-icon-star-off',color:'color:rgba(0,0,0,0.15)',});}else {arr.push({index:i,value:'el-icon-star-on',color:'color:rgb(247, 186, 42)',});}if(i+1 == 6) return arr;}}}

element 如何渲染star评分相关推荐

VUE+ELEMENT:表格渲染导致的异常:You may have an infinite update loop in a component render function
场景: 做一个全文检索,检索到的记录显示到el-table表中,这本是一个简单的问题.后面要对检索的Key在记录中做高亮显示,遇到了这个异常. 百度一下,很吓人.可能有无限更新循环,这怎么行,听着这得 ...
element ui 相关 -------星星评分
更改星星颜色 html: <el-rate v-model="star" :colors="colors" show-text></el-ra ...
element 复杂表格渲染（1）
使用element table 渲染课程表(使用色块展示) 组件封装详情 <el-row><el-col :span="24"><!--此处使用 h ...
jQuery动态五星评分
效果 css .star ul, .star li {list-style: none; }.star {position: relative;width: 600px;height: 24px;ma ...
星级评价的代码php,JavaScript_使用jQuery实现星级评分代码分享，前面有一篇原生js实现星级评 - phpStudy...
使用jQuery实现星级评分代码分享前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. http://s.thsi.cn/js/jquery-1.7.2. ...
React.js核心原理实现：首次渲染机制
2019独角兽企业重金招聘Python工程师标准>>> 一.前言 react.js和vue.js无疑是当下最火的js框架了,它们为组件式的开发传统前端页面.SPA页面.前后端分离等带 ...
通过一个实际例子学习SAP UI5的控件绘制和渲染
以下面这个UI为例: 首先生成按钮对应的渲染器,即ButtonRenderer实例: 将渲染好的button对应的原生html代码存储到buffer里: 接下来依次是这些ui element的渲染器: ...
layui 渲染select下拉选项，日期控件的用法
最近项目中用到关于layui的前端技术,在使用layui 渲染select option下拉复选框时出现了没有值渲染的问题,还有使用layui日期的过程 ,接下来就一起看看吧. /** *从后台渲染 ...
layui父页面调用子页面的渲染_layUI ajax加载html页面后重新渲染的方法
相关问题同: 1.layUI使用jquery.load加载界面时,如何让layui渲染页面? 2.layUI ajax加载html页面后重新渲染 layUI ajax加载html页面后渲染,关键在将h ...

element 如何渲染star评分

element 如何渲染star评分相关推荐

最新文章

热门文章