用render在表格中渲染出如下button的效果，实现修改、删除、复制、重命名功能。
(a) render写法主要参考修改button的用法，点击修改路由到另一个页面；删除写了弹窗的方法；
(b) 删除button写入了modal弹窗；
(c) 复制、重命名中也涉及到弹窗，弹的是同一个界面，但是弹窗界面的标题不一样（在下篇笔记中说明（如何控制弹的页面一样，但是页面标题不一样））
渲染效果示意图
（1）template中代码如下：
<template>
<Card title="工作组">
<Table border :columns="table" :data="tableData" class=""></Table>
</Card>
</template>
:columns为表头，:data为表数据
（2）script中代码如下：
<script>
export default {
name: 'introduction',
data() {
return {
tableData: [{}],
table: [{
title: '序号',
width: 80
},
{
title: '组名',
key: 'name'
},
{
title: '操作',
key: 'action',
align: 'center',
width: 300,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
on: {
click: () => {
this.$router.push({
name: 'user_team_edit'
})
}
}
}, '修改'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
on: {
click: () => {
this.$Modal.confirm({
title: '删除',
content: '<p>确认删除吗?</p>',
onOk: () => {
this.$Message.info('Clicked ok');
},
onCancel: () => {
this.$Message.info('Clicked cancel');
}
});
}
}
}, '删除'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
on: {
click: () => {
this.showModalHandler(OPERATING_STATUS.COPY)
}
}
}, '复制'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
on: {
click: () => {
this.showModalHandler(OPERATING_STATUS.RENAME)
}
}
}, '重命名')
]);
}
}
],
}
}
}
</script>
如何用render在表格中添加图片连接如下
https://blog.csdn.net/suolong914/article/details/81607461
