python怎么实现跨列_vue+element实现表格跨行或跨列合并

前言

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.贴上一个完整代码,可以直接拿去演示

:data="tableData6"

:span-method="arraySpanMethod"

border

style="width: 100%">

prop="id"

label="ID"

width="180">

prop="name"

label="姓名">

prop="amount1"

sortable

label="数值 1">

prop="amount2"

sortable

label="数值 2">

prop="amount3"

sortable

label="数值 3">

:data="tableData6"

:span-method="objectSpanMethod"

border

style="width: 100%; margin-top: 20px">

prop="id"

label="ID"

width="180">

prop="name"

label="姓名">

prop="amount1"

label="数值 1(元)">

prop="amount2"

label="数值 2(元)">

prop="amount3"

label="数值 3(元)">

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

};

}

}

}

}

};

原生方法一(最简单实现td单元格拆分)

1.原理分析

直接在对应的td里面嵌套

强烈推荐方法二,这个实现成本最低,也便添加复选框进行增删改查

2.贴上一个demo

直接可以演示

城市美食好玩的地方

北京北京烤鸭

.ground-route-table,

.ground-route-table-samll {

width: 100%;

border: 1px solid #dfe6ec;

border-collapse: collapse;

}

.ground-route-table td{

border: 1px solid #dfe6ec;

}

原生方法二

属性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)

}

}

5.小插曲

很高兴你还能看到这里,有啥问题可以一起交流,如果觉得有点用,可以先收藏起来呢

6.贴上代码

城市班次编码车辆编码顺序装车点到车点最晚到达时间发车时间到车时间OMP配载代码工作日线路类型线路类型资源类型车牌号司机ID司机姓名司机电话路线执行日期

{{routeList.groundRoute1}}{{routeList.groundRoute2}}{{routeList.groundRoute3}}{{routeList.groundRoute4}}{{routeList.groundRoute5}}{{routeList.groundRoute6}}{{routeList.groundRoute7}}{{routeList.groundRoute8}}{{routeList.groundRoute9}}{{routeList.groundRoute10}}{{routeList.groundRoute11}}{{routeList.groundRoute12}}{{routeList.groundRoute13}}

查看

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);

}

}

}

};

.ground-route-table,

.ground-route-table-samll {

width: 100%;

border: 1px solid #dfe6ec;

border-collapse: collapse;

}

.ground-route-table td{

border: 1px solid #dfe6ec;

}