完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>element-ui合并行和列</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
</style>
</head>
<body>
<div id="app">
<h1>element-ui合并行和列</h1>
<el-table :data="data" border :span-method="objectSpanMethod">
<el-table-column prop="nickname" label="小小号">
</el-table-column>
<el-table-column prop="username" label="姓名">
</el-table-column>
<el-table-column prop="gender" label="性别">
<template slot-scope="scope"> {{scope.row.gender == 0 ? '女' : '男'}} </template>
</el-table-column>
<el-table-column prop="age" label="年龄">
</el-table-column>
</el-table>
<div>通过给table传入<el-link type="danger">span-method</el-link>方法可以实现合并行或列，方法的参数是一个对象，里面包含 <ul>
<li>当前行row</li>
<li>当前列column</li>
<li>当前行号rowIndex</li>
<li>当前列号columnIndex</li>
</ul>四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 </div>
<br />
<div> 注意：当前行号和当前列号都是从0开始 </div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [{
id: 0,
nickname: '法外狂徒',
username: '张三',
gender: 1,
age: 18
},
{
id: 1,
nickname: '职业法师',
username: '刘海柱',
gender: 0,
age: 33
}, {
id: 2,
nickname: '北大还行',
username: '撒贝宁',
gender: 1,
age: 18
}, {
id: 3,
nickname: '悔创阿里',
username: '杰克马',
gender: 0,
age: 18
}, {
id: 4,
nickname: '普通家庭',
username: '马化腾',
gender: 1,
age: 18
}, {
id: 5,
nickname: '不知妻美',
username: '刘强东',
gender: 0,
age: 18
}]
}
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 3) {
if (rowIndex == 0) {
//第四列 第一行 合并 六行1列
return [6, 1];
} else {
// 其它的全部不要渲染，不然撑大表格
return [0, 0]
}
} else if (columnIndex == 0 && rowIndex == 0) {
// 第一列，第一行 合并 一行二列
return [1, 2]
} else if (columnIndex == 1 && rowIndex == 0) {
// 第二列，第一行 [0,0] 不渲染该列
return [0, 0]
}
/*
每次合并行或者列时找准需要合并的地方，然后在确认合并几行几列
*/
}
}
})
</script>
</html>
版权声明：本文为qq_43379916原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。