当前位置:   article > 正文

element table表格合并行和列_element table 合并列

element table 合并列

element-ui 官网案例: table合并行或列

 

 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspancolspan的对象。

  1. <el-table
  2. :data="tableData"
  3. :span-method="objectSpanMethod"
  4. border
  5. style="width: 100%">
  6. <el-table-column
  7. prop="id"
  8. label="ID"
  9. width="180">
  10. </el-table-column>
  11. <el-table-column
  12. prop="name"
  13. label="姓名">
  14. </el-table-column>
  15. <el-table-column
  16. prop="amount1"
  17. sortable
  18. label="数值 1">
  19. </el-table-column>
  20. <el-table-column
  21. prop="amount2"
  22. sortable
  23. label="数值 2">
  24. </el-table-column>
  25. <el-table-column
  26. prop="amount3"
  27. sortable
  28. label="数值 3">
  29. </el-table-column>
  30. </el-table>

element-ui中table表格合并的各参数的意义

1. 有4个参数返回:row,column,rowIndex,columnIndex;

row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,

rowIndex,columnIndex是当前行和列的序号

  1. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  2. if (columnIndex === 0) { //用于设置要合并的列
  3. if (rowIndex % 2 === 0) { //用于设置合并开始的行号
  4. return {
  5. rowspan: 2,     //合并的行数
  6. colspan: 1 //合并的列数,设为0则直接不显示
  7. };
  8. } else {
  9. return {
  10. rowspan: 0,
  11. colspan: 0
  12. };
  13. }
  14. }
  15. }

2.表格合并行和列注释  if (rowIndex % 2 === 0) { // 用于设置合并开始的行号

  1. if (columnIndex === 0) {
  2. if (rowIndex === 0) { // 合并第一行到第四行,从第一行开始,共4行
  3. return {
  4. rowspan: 4,
  5. colspan: 1
  6. }
  7. } else if (rowIndex === 4) { // 合并第五行到第九行,从第五行开始,共5行
  8. return {
  9. rowspan: 5,
  10. colspan: 1
  11. }
  12. } else if (rowIndex === 9) { // 合并第10行到第14行,从第10行开始,共5行
  13. return {
  14. rowspan: 5,
  15. colspan: 1
  16. }
  17. } else { // 其余被合并的行,诸如1、2、3、5、6、7、8、10、11、12、13全都设为0
  18. return {
  19. rowspan: 0,
  20. colspan: 0
  21. }
  22. }
  23. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/101073
推荐阅读
相关标签
  

闽ICP备14008679号