前言
vue+element用于pc后台管理系统比较多,所以后台管理系统一般以处理数据为主,数据结构的复杂程度变高,相对应的前端展示成本也提高,
有些产品经理或许会要求表格跨行或跨列合并,如果你正在想怎么实现,那就接着往下看
最新封装了一个表格合并和编辑插件:vue-split-table,戳一戳
效果图
element的2.x
(注意是2.X新加的方法)
1.span-method方法
可以实现合并行或列，
2.参数
方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
3.函数的返回数组
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置
if (columnIndex === 0) {//判断条件可以设置成你想合并的列的起始位置
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
4.返回对象
return [1,2]也可以返回一个对象
return {
rowspan: 2,//实际上就是给td加上rowspan属性
colspan: 1//实际上就是给td加上colspan属性
};
5.贴上一个完整代码,可以直接拿去演示
<template>
<div>
<el-table
:data="tableData6"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
</el-table>
<el-table
:data="tableData6"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1（元）">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2（元）">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3（元）">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData6: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row,column)
if (row.id=='12987122') {
if (columnIndex === 0) {
return [2, 2];
}
else if (columnIndex === 1) {
return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
</script>
原生方法一(最简单实现td单元格拆分)
1.原理分析
直接在对应的td里面嵌套<table>的<tr>让后台对应返回一个数组,遍历即可实现单元格拆分
强烈推荐方法二,这个实现成本最低,也便添加复选框进行增删改查
2.贴上一个demo
直接可以演示
<table class="ground-route-table">
<thead>
<tr>
<td>城市</td>
<td>美食</td>
<td>好玩的地方</td>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td>
<td>北京烤鸭</td>
<td>
<table class="ground-route-table-small">
<tr>故宫</tr>
<tr>颐和园</tr>
<tr>长城</tr>
</table>
</td>
</tr>
</tbody>
</table>
<style>
.ground-route-table,
.ground-route-table-samll {
width: 100%;
border: 1px solid #dfe6ec;
border-collapse: collapse;
}
.ground-route-table td{
border: 1px solid #dfe6ec;
}
</style>
原生方法二
属性colspan和rowspan实现合并行或列
1.原生的作用
可能有些项目是使用的element1.x版本,如果突然升级风险太高,我做这个就是,所以还是利用原生的table
的colspan和rowspan
2.实现难点
原生的难点在于table都是通过循环产生的,如果直接通过设置类设置样式,这样表格就会变乱,因为v-for下面每个td都创建了,所以要在v-for里面进行判断
3.那么问题来了?
colspan和rowspan的数据是应该是动态的,那么他们怎么动态绑定呢,可能会想到操作DOM,
但是这不是最好的方法,我们可以通过自定义指令将属性与值关联起来
4.自定义指令
mergerows: {
// 指令的定义
inserted: function (el) {
el.setAttribute('rowspan',3)
}
}贴上详解:https://cn.vuejs.org/v2/guide...
5.小插曲
很高兴你还能看到这里,有啥问题可以一起交流,如果觉得有点用,可以先收藏起来呢
6.贴上代码
<template>
<table class="ground-route-table">
<thead>
<tr>
<td>城市</td>
<td>班次编码</td>
<td>车辆编码</td>
<td>顺序</td>
<td>装车点</td>
<td>到车点</td>
<td>最晚到达时间</td>
<td>发车时间</td>
<td>到车时间</td>
<td>OMP配载代码</td>
<td>工作日</td>
<td>线路类型</td>
<td>线路类型</td>
<td>资源类型</td>
<td>车牌号</td>
<td>司机ID</td>
<td>司机姓名</td>
<td>司机电话</td>
<td>路线执行日期</td>
</tr>
</thead>
<tbody>
<tr v-for="(routeList,index) in groundRouteDataEnd" :key="index">
<td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8"><el-checkbox></el-checkbox></td>
<td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute1}}</td>
<td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute2}}</td>
<td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute3}}</td>
<td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute4}}</td>
<td>{{routeList.groundRoute5}}</td>
<td>{{routeList.groundRoute6}}</td>
<td>{{routeList.groundRoute7}}</td>
<td>{{routeList.groundRoute8}}</td>
<td>{{routeList.groundRoute9}}</td>
<td>{{routeList.groundRoute10}}</td>
<td>{{routeList.groundRoute11}}</td>
<td>{{routeList.groundRoute12}}</td>
<td>{{routeList.groundRoute13}}</td>
<td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">
<el-button type="primary" size="mini">查看</el-button>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
groundRouteDataEnd: [
{
groundRoute1: "10",
groundRoute2: "10",
groundRoute3: "10",
groundRoute4: "10",
groundRoute5: "10",
groundRoute6: "10",
groundRoute7: "10",
groundRoute8: "10",
groundRoute9: "10",
groundRoute10: "10",
groundRoute11: "11"
},
{
groundRoute1: "10",
groundRoute2: "10",
groundRoute3: "10",
groundRoute4: "10",
groundRoute5: "10",
groundRoute6: "10",
groundRoute7: "10",
groundRoute8: "10",
groundRoute9: "10",
groundRoute10: "10",
groundRoute11: "11"
},
{
groundRoute1: "10",
groundRoute2: "10",
groundRoute3: "10",
groundRoute4: "10",
groundRoute5: "10",
groundRoute6: "10",
groundRoute7: "10",
groundRoute8: "10",
groundRoute9: "10",
groundRoute10: "10",
groundRoute11: "11"
},
{
groundRoute1: "10",
groundRoute2: "40",
groundRoute3: "10",
groundRoute4: "10",
groundRoute5: "10",
groundRoute6: "10",
groundRoute7: "10",
groundRoute8: "10",
groundRoute9: "10",
groundRoute10: "10",
groundRoute11: "11"
}
]
};
},
directives: {
mergerows: {
// 指令的定义
inserted: function(el) {
el.setAttribute("rowspan", 3);
}
}
}
};
</script>
<style scoped>
.ground-route-table,
.ground-route-table-samll {
width: 100%;
border: 1px solid #dfe6ec;
border-collapse: collapse;
}
.ground-route-table td{
border: 1px solid #dfe6ec;
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。