el-table动态合并

废话就不多说了,直接上代码!!!

合并行

html 复制代码
// 方法一
<template>
  <div class="container">
    <el-table :data="dataSource" :border="true"
      :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" size="mini" style="width: 100%" :span-method="arraySpanMethod">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="product_name" label="辅助"></el-table-column>
      <el-table-column prop="cap_name" label="法师"></el-table-column>
      <el-table-column prop="name" label="刺客"></el-table-column>
      <el-table-column prop="name1" label="坦克"></el-table-column>
      <el-table-column prop="name2" label="射手"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tableCom',
  data () {
    return {
      dataSource: [{
        product_name: '姜子牙',
        cap_name: '诸葛亮',
        name: '韩信',
        name1: '程咬金',
        name2: '狄仁杰'
      },
      {
        product_name: '蔡文姬',
        cap_name: '妲己',
        name: '孙悟空',
        name1: '廉颇',
        name2: '后裔'
      },
      {
        product_name: '蔡文姬',
        cap_name: '貂蝉',
        name: '橘右京',
        name1: '橘右京',
        name2: '孙尚香'
      },
      {
        product_name: '大桥',
        cap_name: '西施',
        name: '赵云',
        name1: '刘禅',
        name2: '刘禅'
      }]
    }
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 合并行  产品名字相同合并
      if (columnIndex === 1) {
        if (rowIndex === 0 || row.product_name !== this.dataSource[rowIndex - 1].product_name) {
          let rowspan = 0
          this.dataSource.forEach(element => {
            if (element.product_name === row.product_name) {
              rowspan++
            }
          })
          return [rowspan, 1]
        } else {
          return [0, 0]
        }
      }
    }
  },
  created () {

  }
}
</script>
html 复制代码
// 方法二
<template>
  <div class="container">
    <el-table :data="tableData" :border="true"
      :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" size="mini" style="width: 100%" :span-method="handleSpanMethod">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="product_name" label="辅助"></el-table-column>
      <el-table-column prop="cap_name" label="法师"></el-table-column>
      <el-table-column prop="name" label="刺客"></el-table-column>
      <el-table-column prop="name1" label="坦克"></el-table-column>
      <el-table-column prop="name2" label="射手"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tableCom',
  data () {
    return {
      tableData: [{
        product_name: '姜子牙',
        cap_name: '诸葛亮',
        name: '韩信',
        name1: '程咬金',
        name2: '狄仁杰'
      },
      {
        product_name: '蔡文姬',
        cap_name: '妲己',
        name: '孙悟空',
        name1: '廉颇',
        name2: '后裔'
      },
      {
        product_name: '蔡文姬',
        cap_name: '貂蝉',
        name: '橘右京',
        name1: '橘右京',
        name2: '孙尚香'
      },
      {
        product_name: '大桥',
        cap_name: '貂蝉',
        name: '赵云',
        name1: '刘禅',
        name2: '刘禅'
      }]
    }
  },
  methods: {
    handleSpanMethod ({ row, column, rowIndex }) {
      if (column.property === 'product_name' || column.property === 'cap_name') {
        // 获取当前行与上一行的属性值
        const currentProperty = row[column.property]
        const previousProperty = rowIndex > 0 ? this.tableData[rowIndex - 1][column.property] : null

        // 判断当前行与上一行的属性值是否相同
        if (currentProperty === previousProperty) {
          return {
            rowspan: 0, // 与上一行相同的属性值,设置跨行数为0,即不显示
            colspan: 1 // 不进行跨列
          }
        }

        // 查找后续行是否与当前行的属性值相同
        let rowspan = 1
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i][column.property] === currentProperty) {
            rowspan++
          } else {
            break
          }
        }

        return {
          rowspan: rowspan, // 跨行数为相同属性值的行数
          colspan: 1 // 不进行跨列
        }
      }
    }
  },
  created () {

  }
}
</script>

效果图:

合并列:

html 复制代码
<template>
  <div class="container">
    <el-table :data="dataSource" :border="true"
      :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" size="mini" style="width: 100%" :span-method="arraySpanMethod">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="product_name" label="辅助"></el-table-column>
      <el-table-column prop="cap_name" label="法师"></el-table-column>
      <el-table-column prop="name" label="刺客"></el-table-column>
      <el-table-column prop="name1" label="坦克"></el-table-column>
      <el-table-column prop="name2" label="射手"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tableCom',
  data () {
    return {
      dataSource: [{
        product_name: '姜子牙',
        cap_name: '诸葛亮',
        name: '韩信',
        name1: '程咬金',
        name2: '狄仁杰'
      },
      {
        product_name: '蔡文姬',
        cap_name: '妲己',
        name: '孙悟空',
        name1: '廉颇',
        name2: '后裔'
      },
      {
        product_name: '蔡文姬',
        cap_name: '貂蝉',
        name: '橘右京',
        name1: '橘右京',
        name2: '孙尚香'
      },
      {
        product_name: '大桥',
        cap_name: '西施',
        name: '赵云',
        name1: '刘禅',
        name2: '刘禅'
      }]
    }
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 合并列 名称值都为"橘右京"、"刘禅" 的合并
      if (columnIndex > 2) {
        let colspan = 0
        const colkeys = Object.keys(row)
        const currentindex = columnIndex - 1
        if (row[colkeys[currentindex]] === '橘右京' || row[colkeys[currentindex]] === '刘禅') {
          if (row[colkeys[currentindex - 1]] !== row[colkeys[currentindex]]) {
            for (let i = currentindex; i < colkeys.length; i++) {
              if (row[colkeys[i]] === '橘右京' || row[colkeys[i]] === '刘禅') {
                colspan++
              } else {
                break
              }
            }
            return [1, colspan]
          } else {
            return [0, 0]
          }
        }
      }
    }
  },
  created () {

  }
}
</script>

效果图:

相关推荐
理想不理想v4 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云14 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据3 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j