iview的Table如何添加按钮以及操作
程序员文章站
2024-03-12 19:40:26
...
<Table border ref="selection"
:stripe="true"
:columns="columns"
width="97%"
height="400"
:data="data1">
</Table>
{
title: '消息状态', // '推送频率',
key: 'status', // 'frequencyDes',
align: 'center',
render: (h, params) => {
if (this.data1[params.index].status === '审核未通过') {
return h('div', [
h('span', {
style: {
marginTop: '10px',
display: 'inline-block',
},
}, '审核未通过'),
h('Button', {
props: {
type: 'primary',
},
style: {
width: '80%',
display: 'flex',
'justify-content': 'center',
},
on: {
click: () => {
alert('审核未通过');
},
},
}, '查看原因'),
]);
} else if (this.data1[params.index].status === '审核通过') {
return h('div', [
h('span', {
style: {
marginTop: '10px',
display: 'inline-block',
},
}, '审核通过'),
]);
} else if (this.data1[params.index].status === '上线中') {
return h('div', [
h('span', {
style: {
marginTop: '10px',
display: 'inline-block',
},
}, '上线中'),
]);
} else if (this.data1[params.index].status === '已下线') {
return h('div', [
h('span', {
style: {
marginTop: '10px',
display: 'inline-block',
},
}, '已下线'),
]);
}
return h('div', [
h('span', {
style: {
marginTop: '10px',
display: 'inline-block',
},
}, '审核中'),
]);
},
},
上一篇: 前端框架iviewui使用示例之menu
下一篇: react入门(三)——state