渲染函数
render: (h) => {
return h('标签', {
属性
}, '填充文本')
}
render: (h) => {
return h('div', [
h('标签', {
// 属性
style: { color: '#432FDE' },
attrs: { class: 'operation' },
}, '填充文本')
])
}
列表渲染
export default {
data () {
return {
column: [
{
title: '序号',
align: 'center',
width: 66,
render: (h, params) => {
return h('small', {}, (this.condition.pageNum - 1) * this.condition.pageSize + params.index + 1)
}
},
// 最常见的匹配
{
title: '角色编码',
key: 'code',
tooltip: true,
width: 200,
align: 'center'
},
// 字符匹配
{
title: '状态',
width: 190,
align: 'center',
render: (h, params) => h('span', this.dic.state.find(({ code }) => (code === params.row.state)).name)
},
// 宽度自适应
{
title: ' '
},
// 自定义操作
{
title: '操作',
width: 100,
align: 'center',
fixed: 'right',
render: (h, params) => {
return h('div', [
h('span', {
style: { color: '#432FDE' },
attrs: { class: 'operation' },
on: {
click: e => {
this.state(params)
e.stopPropagation()
}
}
}, '设置'),
h('span', {
style: { color: '#a08418' },
attrs: { class: Object.keys(params.row.state)[0] === '1' ? 'operation' : 'unoperation' },
on: {
click: e => {
this.setAble(params)
e.stopPropagation()
}
}
}, '禁用')
])
})
}
]
}
}
}
渲染函数实例
render: (h) => {
return h('div', [
h('Icon', {
'class': 'spin-icon-load'
}),
h('div', {
style: 'font-size:20px;'
attrs: { class: Object.keys(params.row.state)[0] === '1' ? 'operation' : 'unoperation' },
props: {
type: 'ios-loading',
size: 32
},
on: {
click: e => {
e.stopPropagation()
}
}
}, '正在上传...')
])
}