动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table

刘斩仙的笔记本

已于 2022-02-15 10:13:30 修改

阅读量2.2k

点赞数 4

分类专栏： Element 文章标签： vue.js javascript 前端

于 2021-12-08 16:18:08 首次发布

本文链接：https://blog.csdn.net/qq_25252769/article/details/121794052

版权

Element 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

简介：

el-table单元格合并，处理hover错乱问题，自定义底部合计栏。

如图所示：

请添加图片描述

源码（复制另存txt，修改.html直接运行）


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>

  </style>
</head>
<body style="background: #eee;">
  <div id="app">
    <el-table 
      :data="tableData" 
      border 
      size='mini' 
      show-summary
      :summary-method="getSummaries"
      :span-method="objectSpanMethod"
      :row-class-name="rowClassName" 
      @cell-mouse-enter="handleMouseEnter" 
      @cell-mouse-leave="handleMouseLeave"
      >
        <el-table-column prop="index" label="序号" width="60">
            <template slot-scope="scope">{{ scope.$index + 1}}</template>
        </el-table-column>
        <el-table-column prop="name" label="召唤师" min-width='100'></el-table-column>
        <el-table-column prop="like" label="喜欢" min-width='80'></el-table-column>
        <el-table-column prop="sex" label="性别" min-width='100'></el-table-column>
        <el-table-column prop="age" label="年龄" min-width='100'></el-table-column>
        <el-table-column prop="big" label="大招" min-width='180'></el-table-column>
        <el-table-column prop="lv" label="等级" min-width='80'></el-table-column>
        <el-table-column prop="hurt" label="伤害" min-width='100'></el-table-column>                                                                                                                                                                                                                                                                                                                                            
    </el-table>
  </div>
</body>

<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  let time = ''
  new Vue({
    el: '#app',
    data() {
      return { 
        tableData:[
          {
            name:'凯',
            like:'伽罗',
            sex:'男',
            age:'20',
            big:'魔皇降世：能抗能打',
            lv:'99',
            hurt:'10000',
          },
          {
            name:'曜',
            like:'伽罗',
            sex:'男',
            age:'21',
            big:'七星斩：打不过就跑',
            lv:'95',
            hurt:'10000',
          },
          {
            name:'李信',
            like:'伽罗',
            sex:'男',
            age:'19',
            big:'王非王，侯非侯：1A1A1A',
            lv:'93',
            hurt:'10000',
          },
          {
            name:'王昭君',
            like:'李白',
            sex:'女',
            age:'18',
            big:'和亲抗拒：沉默爆发',
            lv:'66',
            hurt:'998',
          },
          {
            name:'杨玉环',
            like:'李白',
            sex:'女',
            age:'19',
            big:'云想衣裳花想容：超然入圣',
            lv:'55',
            hurt:'998',
          },
          {
            name:'伊泽瑞尔',
            like:'伊泽瑞尔',
            sex:'男',
            age:'25',
            big:'半月斩：代表月亮消灭你',
            lv:'18',
            hurt:'1',
          },
        ],
        hoverRowLike: -1,
      }
    },
    mounted(){
      
    },
    methods: {
    	//合计 需添加show-summary属性，数组对应行的每列
	    getSummaries(params){
	      return [
	        '合计',
	        '自定义展示',
	        '自定义展示',
	        '10000',
	        '10000',
	        '10000',
	        '10000',
	        '10000',
	      ]
	    },
      //合并行
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        //从那些列需要合并，此处是第三列和第八列
        if (columnIndex === 2 || columnIndex === 7 ) {
          //查询相同类型首次出现的index位置，like：同一个类型的标识
          const i = this.tableData.findIndex( n => n.like == row.like )
          //计算相同类型出现几次
          let num = 0
          this.tableData.map(item =>{
            if(item.like == row.like){
              num++
            }
          })
          //rowIndex === i：从首次出现行开始，num：需要合并行数
          if (rowIndex === i) {
            return {
              rowspan: num,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      // 鼠标进入单元格，记录下当前行的like
      handleMouseEnter(row, column, cell, event) {
        this.hoverRowLike = row.like;
      },
      // 给相同like的row添加类名
      rowClassName({ row, rowIndex }) {
        if (row.like === this.hoverRowLike) {
          return 'hover-row';
        }
      },
      // 鼠标离开
      handleMouseLeave(row, column, cell, event) {
        this.hoverRowLike = -1;
      },
    }
  })
</script>
</html>