前言:
render是比较常用的功能,比如在框架里面的table的时候经常会使用到,这里来说一说,这是使用了iview的Rate(星星打分)来说明效果
效果图:
实现代码:
{
title: '难易度',
// align: 'center',
render:(h, params)=> {
let type = params.row.difficulty;//params.row.difficulty==获取到的值
let style={};
let showText = '';
style.float = 'left';//使打分星星和文字平行
// style.height = '32px';//给文字加样式,让文字和星星居中
style.lineHeight = '32px';//给文字加样式,让文字和星星居中
if(type == 1){
style.color = '#0B99AD';
showText='简单';
}else if(type == 2){
style.color = '#0B99AD';
showText='普通';
}else if(type == 3){
style.color = '#0B99AD';
showText='困难';
}
return h("div",[
h('Rate',{//星星打分效果
style:style,
attrs:{//页面绑定的事件
value:type,
count:3,
disabled:true
}
}),
h('div',{
style:style
},showText)
])
},
},