传智播客_iview_table表格拆分技巧

2019-04-21 分类：Iview 作者：huanggr 阅读（1555）

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 + '米')
])
}

如果你还有不清楚的，也可以查看我写的ivew中render的使用：
iview中的render函数的用法

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(47) 打赏

标签：