当前位置:首页 > 天道酬勤 > 正文内容

表格合并列(table表格合并行)

张世龙2021年12月20日 07:17天道酬勤950

# #元素用户界面#

元素-用户界面

element-ui (https://element.eleme.cn/#/zh-cn/component/table )是一个受欢迎的VUE组件库,包含许多优秀的组件。 今天我们来谈谈table的矩阵合并

官方例子

公式示例

要合并行或列,必须将span-method方法传递给table。 方法的参数是一个对象,其中包含四个属性:当前行row、当前列column、当前行号rowIndex和当前列号columnIndex。 此函数返回一个数组,其中第一个元素表示rowspan,第二个元素包含两个元素表示colspan。 也可以返回名为rowspan和colspan的对象。

模板

div

电子表格

3360数据=' tabledata '

360跨度-方法='数组跨度方法'

顺序

样式=' width : 100 % '

El表列属性=' id '标签=' id '宽度=' 180 '/El表列

El表列属性='名称'标签='名称'/El表列

El表列属性=' amount1'可移植标签='数值1 '/El表列

El表列属性=' amount2'可移植标签='数值2 '/El表列

El表列属性=' amount3'可移植标签='数值3 '/El表列

/电子表格

电子表格

3360数据=' tabledata '

360跨度-方法=' objectspanmethod '

顺序

样式=' width : 100 %; margin -顶级: 20px '

El表列属性=' id '标签=' id '宽度=' 180 '/El表列

El表列属性='名称'标签='名称'/El表列

El表列属性=' amount1' label='数值1 (原) '/El表列

El表列属性=' amount2' label='数值2 (原) '/El表列

El表列属性=' amount3' label='数值3 (原) '/El表列

/电子表格

/div

/模板

脚本

导出默认值{

数据()。

返回

tableData: [

{ id: '12987122 ',名称: '王小虎',亚马逊1: ' 234 ',亚马逊2: ' 3.2 ',亚马逊3: 10 },

{id:'12987123 ',名称: '王小虎',亚马逊1: ' 165 ',亚马逊2: ' 4.43 ',亚马逊3: 12 },

{id:'12987124 ',名称: '王小虎',亚马逊1: ' 324 ',亚马逊23360 ' 1.9 ',亚马逊: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 }) { if (rowIndex % 2 === 0) { if (columnIndex === 0) { return [1, 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>

理解 arraySpanMethod 方法

// 数组方式合并列,将行索引与2取余为0的行中的第1、 2列合并 arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 如果 行索引与2取余为零, if (rowIndex % 2 === 0) { // 如果 列索引是0(第一列),则设置合并 if (columnIndex === 0) { return [1, 2]; // 合并一行中的两列,从当前列开始。即合并1行,且从第一列开始合并2列 } else if (columnIndex === 1) { // 删除多余的列(原来的第2列) // 因为 第一列合并为两列了,占用了两列的空间,原来的第2列会占用原来的第三列,依次类推 ,这一行就会多出一列,并且导致数据错行,显示结果不正确 return [0, 0]; } } },

注意: 行列合并后,记得使用[0,0] 删除多余列 ,使用对象方式合并时一样,{ rowspan: 0, colspan: 0}也是为了删除多余列。

拓展

需求:如下图画出表格

行列合并拓展

分析: 上图中是合并第3列,合并后第3列将占据原来的第4、5列。所以要将第4、5列删掉

代码:

<template> <div> <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 800px"> <el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column label="数值" align="center" > <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-column> </el-table> </div> </template> <script> export default { data(){ return{ tableData: [ { 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, columnIndex }) { let val1 = row.amount1; if(val1 % 2 === 0 ){ // 如果是第2列 if(columnIndex ===2){ return [1,3] ; // 从第2列开始,合并一行中的三列,及合并3、4、5 列 }else if( columnIndex === 4 || columnIndex === 5){ // 删除 4、5列 return [0 , 0] } } } } } </script> <style> </style>

行合并的和列子类似。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/25472.html

标签: table
分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。