iView表格（table）渲染（render）iView表格(table)渲染(render)
1、语法
以下分别定义了：标签名称，（样式，事件等综合内容），显⽰内容 render: (h, params) => {
return h('span', {
style: {
color: '#FF7D41'
},
on: {
click: () => {
console.log(params)
}
}
}, '点击');
}
2、简单例⼦
render: (h, params) => {
return h('span', 'hello');
}
3、同时显⽰多个内容
render:(h,params)=>{
return h('div',[
h('span',w.name),
h('span', ' ('+w.age+')')
]);
}
4、对数据进⾏处理
在数据返回之前可以进⾏任何数据处理
1>时间格式转换
render:(h,params)=>{
let time =this.$w.time).format('YYYY-MM-DD HH:mm:ss')
return h('span', time);
}
清分机
2>数据处理：数组拼接字符串等
render: (h, params) => {
let str = ''
for (let i = 0, len = w.arr.length; i < len; i++) {
str += `${w.arr[i].name}-${w.arr[i].age} | `
}
return h('span', str);
}
3>多情况判断
w.age >18){
return h('span', '未成年');
}else{
return h('span', '成年');
}
}
render:(h,params)=>{
w.num){
case1:
return h('span','你');
break;
case2:
return h('span','好');
break;
case3:
return h('span','啊');
break;
}
}
4>点击事件
render: (h, params) => {
return h('span', {
on: {
click: () => {
/
/ 这⾥通常做路由跳转，弹窗显⽰，发送请求等 }
}
}, '点击');
}
5>样式处理：⽂本溢出以省略号显⽰
render:(h,params)=>{
return h('span',{
style:{
display: 'inline-block',
lumn._width*0.9+'px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}
},w.name);
}
6>悬浮以⽓泡显⽰内容
h('Tooltip',{
props:{
placement: 'top',
}
},[
h('div',{
slot: 'content',
style:{
whiteSpace: 'normal'
}
},t // ⽓泡内的⽂字
)顺德大部制
])
]);
}
render:(h,params)=>{
return h('div',[
h('Tooltip',{
props:{
placement: 'top',
}
},[
h('div',[
h('span',t),
h('img',{
attrs:{
// 图⽚需放在static⽂件夹下
src: '../../../static/img/calibration-tip.svg'
},
style:{
marginBottom: '3px'
}
})
]),// 表格列显⽰⽂字和图⽚
h('div',{
slot: 'content',
style:{
whiteSpace: 'normal'
}
},t // ⽓泡内的⽂字
)
])
]);
}
8>显⽰图⽚
h('img',{
domProps:{voip业务
'src':w.img
},
style:{
display: 'block',
width: '30px',
height: '30px',
borderRadius: '3px',
// margin: '0 auto'
},
})
])
}
bug
注意：尽量不要在render和return之间做赋值操作，赋值操作及数据改变（i++）会触发iView的render的刷新机制，会不断刷新直到报错。 如果有点击事件，将这些操作都放在事件中进⾏处理。
乡村社会学⼀、特定样式
给某⾏，某列添加不同的背景⾊
⾏
通过属性 row-class-name 可以绑定⼀个⽅法，参数为row和index，row会返回每⼀⾏的数据，可以通过判断每⾏的某个属性是否为⾃⼰想要的值来为这⼀⾏添加⼀个类名，再通过这个类名来添加样式。index会返回每⾏的索引，添加样式同理。
<Table:row-class-name="rowClassName":columns="columnsRow":data="dataRow"></Table>
.
ivu-table .demo-table-row td{
background-color: #2db7f5;
color: #fff;
}
data(){
return{
columnsRow:[
{
title:'Name',
key:'name'
宋香波
},
{
title:'Age',
key:'age'
}
],
dataRow:[
{
name:'lee',
age:18
},
{
name:'hello',
age:21切削机
}
],
}
},
methods:{
rowClassName(row, index){
if(index ===1){
return'demo-table-row';
}
if(row.age ===18){
return'demo-table-row';
}
return'';
}
}
列
通过给列 columns 设置字段 className 可以给某⼀列指定⼀个样式。<Table:columns="columnsCol":data="dataCol"></Table>
.ivu-table td.demo-table-column{
background-color: #2db7f5;
color: #fff;
}
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议