iview关于表格合并拆分的技巧

2018-10-18 分类：Iview 作者：huanggr 阅读（8218）

iview关于表格合并拆分的技巧

iview的表格拆分以及合并不同于一般的表格拆分和合并，普通的表格拆分合并（table）可以使用rowspan，colspan来进行横向和纵向的拆分以及合并，但是iview的操作与之有着很大的不同，下面将为大家详细讲解思路。

iview关于表格合并拆分的技巧-思路分析

我们可以把一个iview表格看做是由div等标签拼接起来的表格，但是不同于table，表格的外部样式已经由iview进行的封装，那么外部的样式动不了，我们怎么办呢？其实我们可以使用render在表格内部在生成一两个表格，这样子，给人的感觉就是一个表格均分成了两个，如下图：

iview关于表格合并拆分的技巧-图片示例：

iview关于表格合并拆分的技巧
现在我们可以看到一个表格就被均分为了两个，且中间有分割线隔开，这样这个效果就完成啦！

iview关于表格合并拆分的技巧-源码展示：

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

//iview关于表格合并拆分的技巧
//iview关于表格合并拆分的技巧
<template>
<Table :columns="columns1"
:data="data"></Table>
</template>
<script>
export default {
data () {
return {
name: 'table',
columns1: [

{
title: '属性名',
key: 'valueName'
},
{
title: '属性值',
key: 'name',
render: (h, params) => {
return h('div', [
h('p', `武器伤害：` + params.row.attribute.Hurt),
h('div', {
style: {
margin: '5px 0',
height: '1px',
background: '#ccc',
}
}),
h('p', `武器范围:` + params.row.attribute.Range + '米')
])
}
}

],
data: [
{
attribute: {
Hurt: 30,
Range: 300
},
valueName: '雷神 - M4A1',
}, {
attribute: {
Hurt: 30,
Range: 300
},
valueName: '黑龙 - M4A1',
}

]
}
}
}
</script>

iview关于表格合并拆分的技巧-补充说明

如果你需要添加一些事件来进行一些操作，也可以在Render中直接书写：
这里举的例子就是一个点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//iview关于表格合并拆分的技巧-添加事件
//iview关于表格合并拆分的技巧
render: (h, params) => {
return h('div', [
h('p', `武器伤害：` + params.row.attribute.Hurt),
h('div', {
style: {
margin: '5px 0',
height: '1px',
background: '#ccc',
},
on: {
click: () => {
//这里放事件
console.log(params.row)
}
}
}),
h('p', `武器范围:` + params.row.attribute.Range + '米')
])
}