View UI，即原先的 iView，从 2019 年 10 ⽉起正式更名为 View UI，并使⽤全新的 Logo
在项⽬开发中，有时需要将表格的⾏或列进⾏合并，View UI （iView）从4.0.0版本开始，增加了 ⾏/列合并 属性，使我们可以⽅便地对表格⾏列进⾏合并，本⽂介绍这⼀属性如何使⽤ 1、基本使⽤介绍
⾸先，要确保使⽤了 View UI （iView）4.0.0 以上版本
打开官⽅⽂档，可以看到，⾏/列合并需要设置属性 span-method
神秘的白马王子
通过 span-method="handleSpan"，指定⼀个⽅法，在这个⽅法中实现合并⾏列的逻辑，该⽅法中有4个参数，分别是 row: 当前⾏、column: 当前列、rowIndex: 当前⾏索引、 columnIndex: 当前列索引。先不解释这4个参数具体什么意思了，先看官⽹⽰例demo，将demo 代码复制<template>
<Table :columns="columns14" :data="data5" border :span-method="handleSpan"></Table>
</template>
<script>
export default {
data () {
return {
columns14: [
{
title: 'Date',
key: 'date'
},
{
title: 'Name',
key: 'name'
key: 'name'
},
{
title: 'Age',
建湖实验初中
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data5: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
methods: {
handleSpan ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0 && columnIndex === 0) {
return [1, 2];
} else if (rowIndex === 0 && columnIndex === 1) {
return [0, 0];
}
if (rowIndex === 2 && columnIndex === 0) {
return {
rowspan: 2,
colspan: 1
国际学术会议
};
} else if (rowIndex === 3 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
邢台学院六连跳视频
</script>
这⾥官⽹ demo 并没有对 handleSpan ⽅法进⾏详细说明，给我们学习带来⼀定难度，这也是笔者写这篇教程的原因
demo 运⾏效果如下图
可以看到，第⼀⾏的第⼀列和第⼆列合并，第三⾏第⼀列和第四⾏第⼀列合并
这时，我们再看代码
先看 ① 处的代码，rowIndex === 0 指的是第⼀⾏， columnIndex === 0 指的是第⼀列，rowIndex 和 columnIndex 是从0开始⽽不是从1开始。
if (rowIndex === 0 && columnIndex === 0) 表⽰的是第⼀⾏第⼀列
return [1, 2] 表⽰合并1⾏2列
else if (rowIndex === 0 && columnIndex === 1) 是指第⼀⾏，第⼆列
return [0, 0] 表⽰合并0⾏0列，即这是被合并的单元格
这⾥被合并的单元格⼀定要返回 return [0, 0]，否则会出现数据下串 上⽅ ① 处代码表⽰以第1⾏第1列的单元格数据为主，向右合并1⾏2列，⽽第1⾏第2列单元格作为被合并的单元格，要返回return [0, 0]
② 处的代码道理相同，以第3⾏第1列单元格数据为主向下合并1⾏2列，⽽被合并的第4⾏第1列返回 return [0, 0]（这⾥既可以返回数组，也可以返回对象）
由 ① 和 ② 处的代码可以推出，返回 return [1, 1]，表⽰合并1⾏1列，即保持单元格原样，不进⾏合并
明⽩这个道理后，我们试着改动⼀下，看看能不能实现想要的效果
这⾥我想合并第⼀⾏的第⼆列和第三列，合并第⼆⾏第⼀列第三⾏第⼀列和第四⾏第⼀列，代码如下
<template>
<Table :columns="columns14" :data="data5" border :span-method="handleSpan"></Table> </template>
<script>
export default {
data () {
return {
columns14: [
{
title: 'Date',
key: 'date'
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
]
,
data5: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
第十一届全国人民代表大会第四次会议{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
methods: {
handleSpan ({ row, column, rowIndex, columnIndex }) {
环太平洋联盟
if (rowIndex === 0 && columnIndex === 1) {
return [1, 2];
} else if (rowIndex === 0 && columnIndex === 2) {
return [0, 0];
}
if (rowIndex === 1 && columnIndex === 0) {
return {
rowspan: 3,
rowspan: 3,
colspan: 1
};
} else if (rowIndex === 2 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 3 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
</script>
上边代码就不做过多解释了，需要注意的是，第⼆⾏第⼀列第三⾏第⼀列和第四⾏第⼀列合并时，因为有两个被合并的单元格，因此需要两个都返回 return [0, 0]，否则会出现数据和样式问题
效果如下图
相信通过上边两个⽰例 demo，你已经学会了合并单元格的基本使⽤，下⾯看看在项⽬中如何使⽤吧
2、项⽬中的使⽤
观察上⾯代码，发现我们没有使⽤ row 对象和 column 对象，⽽在实际项⽬中，也不可能像上边代码那样通过 rowIndex
和 columnIndex 在前端将合并的单元格写死，⽽是需要根据后台返回给前端的数据进⾏逻辑判断，决定合并哪些单元格
这⾥我们讲解⼀个⽰例，还⽤上边的表结构
假设我们想合并 name 值相同的单元格
先修改⼀下数据，使name值相同，再清空 handleSpan ⽅法，⽅便查看，代码如下
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议