美文网首页
iview如何用render渲染table

iview如何用render渲染table

作者: Jerry0222 | 来源:发表于2018-11-10 09:44 被阅读0次

    用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

    相关文章

      网友评论

          本文标题:iview如何用render渲染table

          本文链接:https://www.haomeiwen.com/subject/xttzxqtx.html