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

2018年10月18日作者: 国瑞个人博客 2041次浏览

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函数的用法

百度已收录

点击快速分享：

以上就是国瑞前端个人博客带来的是《iview关于表格合并拆分的技巧》，感谢您的观看！

如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/727.html

「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」

赞( 35 ) 打赏

标签：

iview iview-table

上一篇：如何防止a标签丢失权重

下一篇：iview中多选框单选实现方法

点击这里取消回复。

1 Windows NT | Chrome 69.0.3497.92
1

2018-10-19 11:01 回复
1. 超级管理员 Windows NT | Chrome 69.0.3497.92
  @1测试一波，哈哈
  
  2018-10-19 11:05 回复
2 Windows NT | Chrome 69.0.3497.92
2

2018-10-19 11:01 回复
超级管理员 Windows NT | Chrome 69.0.3497.92
测试

2018-10-19 11:08 回复