1. 作为一个小菜鸟,被要求做一个表格合并,咱以前也没用过vue,好在以前用过layui,也不算纯前端小白,经过我几天查找研究,找到一个人家写的很好的案例,拿过来记录一下。废话不多说,上代码。
  2. el-table标签里添加 :span-method=“方法名”(前面加“:”表示动态数据),在方法中处理合并行/列的逻辑。
<el-dialog :title="title"
               :visible.sync="computeFlag"
               :span-method="objectSpanMethod"
               width="1050px"
               append-to-body>
  1. 首先看看官网的例子,但是很难满足需要
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {    //用于设置要合并的列
          if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
            return {
              rowspan: 2,     //合并的行数
              colspan: 1          //合并的列数,设为0则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
  1. 排序好的数据进行合并js(亲测好用)

export 如何在vue中引用

/**
 1.  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal]) {
        mList[rowVal]++
        data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = 1
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}
//这是单独的引入,写在js上,我单独摘出来为了方便看
import { mergeTableRow } from "@/api/lib/airtjtool";
  1. 没有排好序的(本人没试)
/**
 1. 改良后(不相邻的数据相互不受影响)
 2.  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal] && mList[rowVal].newIndex === index) {
        mList[rowVal]['num']++
        mList[rowVal]['newIndex']++
        data[mList[rowVal]['index']][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}
  1. 主要调用如下
data() {
  return {
    table: [{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT',
      checkMoney: '300.22',
      attention: '检查前空腹',
      appointmentTime: ''
    },{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT1',
      checkMoney: '303.22',
      attention: '检查前空腹',
      appointmentTime: ''
    },{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT22',
      checkMoney: '340.22',
      attention: '检查前空腹',
      appointmentTime: '2019-5-29 10:30'
    },{
      id: '1',
      checkRoom: 'DR',
      checkProject: '鼻骨',
      checkMoney: '500.22',
      attention: '检查前空腹',
      appointmentTime: '2019-5-29 9:30'
    }]
  };
},
created(){
  // 给table赋值,重新遍历新增rowSpan属性,checkRoom,appointmentTime为table里面需要合并的属性名称,根据自己需要给表赋值
  this.table = mergeTableRow(this.table, ['checkRoom', 'appointmentTime'])
},
methods: {
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     //合并列的属性
     const span = column['property'] + '-span'
     if(row[span]){
         return row[span]
     }
  }
}

7.效果图如下
在这里插入图片描述

  1. 最后补充:后面如果有按钮列也可以进行合并,配置标签中的prop,可以对应前面“检查室合并的行对齐”,只需要按钮的表格属性和想合并行列的属性一样prop就可以。
<el-table-column align="right"  prop="id"
                         label="操作">

          <template>
            <el-button size="mini"
                       @click="over()">按钮</el-button>

          </template>
        </el-table-column>
  • 欢迎指正谢谢!!
Logo

前往低代码交流专区

更多推荐