Content Table

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 函数如何实现模板功能