下面是渲染 按钮 图片 图标 开关的写法
{
title: '操作',
key: 'action',
align: 'center',
render: function (h, params) {
return h('div', [
h('Button', { //渲染按钮
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '8px'
},
on: {
click: function () {
mCheck.singleShow(params.row);
}
}
}, '查看'),
h('icon', { //渲染图标
props: {
type: 'md-arrow-dropup',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.Edit(params.row)
}
}
}),
h('i-switch', { //渲染switch
props: {
type: 'primary',
value: 'params.row.else',
// disabled:
// size: '20'
},
style: {
marginRight: '5px',
},
on: { //操作事件
'on-change': (value) => { //值发生了改变调用方法 触发事件是on-change,用双引号括起来,
console.log(value) //true false
}
}
}),
h('img', { //渲染图片
attrs: {
src: params.row.avatarUrl,
style: 'width: 100px;border-radius: 2px;margin-top:4px;' //图片在表格中的样式
},
}),
h('span', {//自定义渲染 这里拿渲染温度来举例子的
style: {
color: '#31708f'
}
}, params.row.orange + ' ℃ '),
]);
}
}