用render在表格中渲染出如下button的效果，實(shí)現(xiàn)修改、刪除、復(fù)制、重命名功能。
(a) render寫法主要參考修改button的用法，點(diǎn)擊修改路由到另一個(gè)頁面；刪除寫了彈窗的方法；
(b) 刪除button寫入了modal彈窗；
(c) 復(fù)制、重命名中也涉及到彈窗，彈的是同一個(gè)界面，但是彈窗界面的標(biāo)題不一樣（在下篇筆記中說明（如何控制彈的頁面一樣，但是頁面標(biāo)題不一樣））
渲染效果示意圖
（1）template中代碼如下：
<template>
<Card title="工作組">
<Table border :columns="table" :data="tableData" class=""></Table>
</Card>
</template>
:columns為表頭，:data為表數(shù)據(jù)
（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>確認(rèn)刪除嗎?</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)
}
}
}, '復(fù)制'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
on: {
click: () => {
this.showModalHandler(OPERATING_STATUS.RENAME)
}
}
}, '重命名')
]);
}
}
],
}
}
}
</script>
如何用render在表格中添加圖片連接如下
https://blog.csdn.net/suolong914/article/details/81607461
