Content Table
2018-03-09

iView 的 Table 中插入按钮

很多时候需要在 Table 的单元格中使用按钮，iView 的官方例子使用函数 createElement (简写 h) 来创建，但是代码很繁杂、不直观、难以实现复杂的 DOM 结构。还好除此之外可以使用 JSX 来实现，能够方便的增加 class、wrapper、图标、任意的 DOM 等。

JSX 实现

1
2
3
4
5
6
7
8
9
10
11
{ title: '操作', key: 'action', width: 160, align: 'center',
    // 编辑和删除按钮
    render: (h, params) => {
        return (
            <div class="cell-button-container">
                <i-button type="primary" size="small" onClick={()=>{this.editSchool(params.index)}}   icon="edit">编辑</i-button>
                <i-button type="error"   size="small" onClick={()=>{this.deleteSchool(params.index)}} icon="android-delete">删除</i-button>
            </div>
        );
    }
}

提示:

  • 按钮的标签使用 <i-button>，不能使用 <Button>
  • 按钮的事件处理 vue 中为 on-click，但在 JSX 中为 onClick

官方例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{ title: '操作',    key: 'action', width: 160, align: 'center',
    // 编辑和删除按钮
    render: (h, params) => {
        return h('div', [
            h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                    click: () => { this.editSchool(params.index); }
                }
            }, '编辑'),
            h('Button', {
                props: { type: 'error', size: 'small' },
                on: {
                    click: () => { this.deleteSchool(params.index); }
                }
            }, '删除')
        ]);
    }
}

完整例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<template>
    <div>
        <Button type="primary" @click="addSchool">添加学校</Button>
        <Table :columns="columns" :data="schools" style="margin: 10px 0;"></Table>
        <center>
            <Page :total="100" :page-size="20" size="small"></Page>
        </center>
    </div>
</template>

<script>
    const schools = [];
    for (let i = 0; i < 10; ++i) {
        schools.push({
            name: '贵阳六中-' + i,
            province: '贵州/贵阳',
            type: '初中',
            url:  'http://ebag.gylzh.cn',
            info: '2346/13/945/831'
        });
    }

    export default {
        mounted() {
            // this.$Message.info('Loading schools');
        },
        data() {
            return {
                columns: [
                    { title: '学校名称', key: 'name' },
                    { title: '省份',    key: 'province' },
                    { title: '教育类型', key: 'type' },
                    { title: '站点地址', key: 'url' },
                    { title: '用户数/教师数/学生数/家长数', key: 'info' },
                    { title: '操作', key: 'action', width: 160, align: 'center',
                        // 编辑和删除按钮
                        render: (h, params) => {
                            return (
                                <div class="cell-button-container">
                                    <i-button type="primary" size="small" onClick={()=>{this.editSchool(params.index)}}   icon="edit">编辑</i-button>
                                    <i-button type="error"   size="small" onClick={()=>{this.deleteSchool(params.index)}} icon="android-delete">删除</i-button>
                                </div>
                            );
                        }
                    }
                ],
                schools: schools
            };
        },
        methods: {
            // 添加新学校
            addSchool() {
                this.$router.push({
                    name: 'school-editor'
                });
            },
            editSchool(index) {
                this.$Message.info('Edit: ' + index);
            },
            deleteSchool(index) {
                this.$Message.info('Delete: ' + index);
                this.schools.splice(index, 1);
            }
        }
    };
</script>

<style lang="scss">
    .app-main {
        width: 100%;
        height: 100%;
    }

    .cell-button-container button:first-child {
        margin-right: 5px;
    }

    /* 鼠标放到行上才显示按钮 */
    /* .cell-button-container {
        display: none;
    }

    .ivu-table-row:hover .cell-button-container {
        display: block;
    } */
</style>

参考资料

RC13 版中 Table 组件的 render 函数如何实现模板功能