当前位置:   article > 正文

Element-UI的table合并span-method

Element-UI的table合并span-method
<el-table class="table-edit" :span-method="spanMethod" :data="list" border style="width: 100%">
      <el-table-column prop="module" width="180" :label="$lang('模块')"> </el-table-column>
      <el-table-column prop="fields" :label="$lang('字段')"> </el-table-column>
      <el-table-column prop="before" :label="$lang('修改前')" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="after" :label="$lang('修改后')" :show-overflow-tooltip="true"></el-table-column>
 </el-table>

 // 合并表单
objectSpanMethod({ rowIndex, columnIndex }) {
   if (columnIndex === 0) { //用于设置要合并的列
   if (rowIndex % 16 === 0) { //用于设置合并开始的行号
      return {
         rowspan: 16, //合并的行数
         colspan: 1 //合并的列数,设为0则直接不显示
      }
   } else {
     return {
       rowspan: 0,
       colspan: 0
     }
   }
 }
}
// spanMethod({ row, column, rowIndex, columnIndex }) {
//      const span = column['property'] + '-span'
//      console.log(span)
//      if (row[span]) {
//        console.log(row[span]);
//        return row[span]
//      }
//    },
//    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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/279876
推荐阅读
相关标签
  

闽ICP备14008679号