iView的Table中使用Render渲染气泡提示Poptip组件

iView 就不多说了,最近一直在苦苦吃饼;在 Table 中想要渲染Poptip组件,直接使用 Render 来操作

渲染一个自定义列(默认的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: { type: 'primary', size: 'small' },
style: { marginRight: '5px' },
on: {
click: () => {
this.$Message.info('点击了【查看】按钮')
}
}
}, '查看'),
h('Button', {
props: { type: 'error', size: 'small'
},
on: {
click: () => {
this.$Message.info('点击了【删除】按钮')
}
}
}, '删除')
]);
}
},

在某些需求中,它并不满足我们,当然,您可以在点击的时候调取 Modal 对话框也是可以的,但我并没有这么做,我们稍微改造下

渲染 Poptip 组件形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{title: '操作',
key: 'action',
fixed: 'right',
width: 150,
render: (h, params) => {
return h('div', [
h('Button', {
props: { type: 'primary', size: 'small' },
style: { marginRight: '5px' },
on: {
click: () => {
this.show(params.index)
}
}
}, '编辑'),
h('Button', { props: {type: 'error', size: 'small'} },
[
h('Poptip',
{ props: { confirm: true, transfer: true, title: '删除后不可恢复,确定要删除吗!', type: 'error', size: 'small' },
on: {
'on-ok': () => {
this.$Message.info('点击了【确定】按钮')
},
'on-cancel': () => {
this.$Message.info('点击了【取消】按钮')
}
}
}, '删除'
)
]
)
])
}
}

看下效果

15525544602316

PS:吃饼道路很艰辛