iview如何用render渲染table

2018-11-10  本文已影响0人  Jerry0222

用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

上一篇下一篇

猜你喜欢

热点阅读