【Vue2 + ElementUI】el-table动态合并行和列

已于 2023-12-29 12:13:18 修改
阅读量1.9k 收藏 6
点赞数
分类专栏： ElementUI 文章标签： vue.js 前端 elementui vscode
于 2023-03-08 16:01:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47375144/article/details/129405436
版权
该文章展示了一个使用ElementUI库创建的表格组件示例，其中包含了单元格合并功能，数据是假定的，实际应用中应替换为接口数据。同时，文章还提及了一个Echarts饼图，用于显示不同类型的统计数据。
摘要由CSDN通过智能技术生成

实现：ElementUI + 假数据(使用时替换为接口数据即可)

一. 效果图

在这里插入图片描述

二. 代码

<template>
  <div class="table-wrap">
    <el-table
      :data="tableData"
      :span-method="handleSpanMethod"
      :cell-style="{ background: '#FFFFFF' }"
      border
      style="width: 100%"
    >
      <el-table-column prop="arealame" label="景区名称" align="center" />
      <el-table-column prop="type" label="行业类型" align="center" />
      <el-table-column prop="planceName" label="行业场所" align="center" />
      <el-table-column prop="scenicPersonCount" label="从业人员" align="center" />
      <el-table-column prop="cameracount" label="摄像头" align="center" />
      <el-table-column prop="scenicArchivescount" label="处罚信息" align="center" />
      <el-table-column prop="punishCount" label="案事件" align="center" />
      <el-table-column prop="personalizeCount" label="个性化" align="center" />
      
    </el-table>
  </div>
</template>
 
<script>
export default {
  name: 'CellMerge',
  data() {
    return {
      tableData: [],
      // 合并单元格
      arealameArr: [], // arealame
      arealameIndex: 0, // arealame索引
      typeArr: [], // type
      typeIndex: 0, // type索引
      planceNameArr: [], // planceName
      planceNameIndex: 0, // planceName索引
      scenicPersonCountArr: [], // scenicPersonCount
      scenicPersonCountIndex: 0, // scenicPersonCount
      cameracountArr: [], // cameracount
      cameracountIndex: 0, // cameracount索引
      scenicArchivescountArr: [], // scenicArchivescount
      scenicArchivescountIndex: 0 // scenicArchivescount索引
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    // 初始化表格数据
    initTableData() {
      const newTableData = [
        {
          'arealame': '台儿庄景区',
          'industryTypevoList': [
            {
              'type':"美食",
              'industrystatisticsvolist': [
                {
                  'planceName': '1001',
                  'scenicPersonCount': '88801',
                  'cameracount': '99901',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                },
                {
                  'planceName': '1002',
                  'scenicPersonCount': '88802',
                  'cameracount': '99902',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                },
                {
                  'planceName': '1003',
                  'scenicPersonCount': '88803',
                  'cameracount': '99903',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                }
              ]
            },
          ]
        },
        {
          'arealame': '铁道游击队',
          'industryTypevoList': [
            {
              'type':"宾馆1",
              'industrystatisticsvolist': [
                {
                  'planceName': '1001',
                  'scenicPersonCount': '88801',
                  'cameracount': '99901',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                },
                {
                  'planceName': '1002',
                  'scenicPersonCount': '88802',
                  'cameracount': '99902',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                },
                {
                  'planceName': '1003',
                  'scenicPersonCount': '88803',
                  'cameracount': '99903',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                }
              ]
            },
            {
              'type':"宾馆2",
              'industrystatisticsvolist': [
                {
                  'planceName': '1001',
                  'scenicPersonCount': '88801',
                  'cameracount': '99901',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                },
                {
                  'planceName': '1002',
                  'scenicPersonCount': '88802',
                  'cameracount': '99902',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                },
                {
                  'planceName': '1003',
                  'scenicPersonCount': '88803',
                  'cameracount': '99903',
                  'scenicArchivescount': '6',
                  'punishCount': '7',
                  'personalizeCount': '8',
                }
              ]
            },
          ]
        },
      ]
      this.tableData = []
      newTableData.map((res, index) => {
        const parentId = index
        this.tableData.push.apply(
          this.tableData,
          this.handleData([res], parentId)
        )
      })
      this.mergeTable(this.tableData)
    },
    // table 表格数据初始化处理，将树结构数据转为一维数组
    handleData(data, parentId) {
      data.map((res, index) => {
        var obj = {
          id: parentId
        }
        for (const key in res) {
          const isarr = Object.values(res).find((age) => {
            return Array.isArray(age)
          })
          if (isarr) {
            if (Array.isArray(res[key])) {
              for (let i = 0; i < res[key].length; i++) {
                Object.assign(obj, res[key][i])
                data.push(obj)
                res[key].splice(i, 1)
                if (res[key].length === 0) {
                  data.splice(index, 1)
                }
                this.handleData(data, parentId)
              }
            } else {
              Object.assign(obj, { [key]: res[key] })
            }
          }
        }
      })
      return data
    },
    // 初始化合并行数组
    mergeInit() {
      this.arealameArr = [] // arealame
      this.arealameIndex = 0 // arealame索引
      this.typeArr = [] // type
      this.typeIndex = 0 // type索引
      this.planceNameArr = [] // planceName
      this.planceNameIndex = 0 // planceName索引
      this.scenicPersonCountArr = [] // scenicPersonCount
      this.scenicPersonCountIndex = 0 // scenicPersonCount索引
      this.cameracountArr = [] // cameracount
      this.cameracountIndex = 0 // cameracount索引
      this.scenicArchivescountArr = [] // scenicArchivescount
      this.scenicArchivescountIndex = 0 // scenicArchivescount索引
    },
    // 合并表格
    mergeTable(data) {
      this.mergeInit()
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必须存在，以第一行为基准
            this.arealameArr.push(1) // arealame
            this.arealameIndex = 0
 
            this.typeArr.push(1) // type
            this.typeIndex = 0
 
            this.planceNameArr.push(1) // planceName
            this.planceNameIndex = 0
 
            this.scenicPersonCountArr.push(1) // scenicPersonCount
            this.scenicPersonCountIndex = 0
 
            this.cameracountArr.push(1) // cameracount
            this.cameracountIndex = 0
 
            this.scenicArchivescountArr.push(1) // scenicArchivescount
            this.scenicArchivescountIndex = 0
          } else {
            // 判断当前元素与上一元素是否相同
            // arealame
            if (
              data[i].arealame === data[i - 1].arealame &&
              data[i].id === data[i - 1].id
            ) {
              this.arealameArr[this.arealameIndex] += 1
              this.arealameArr.push(0)
            } else {
              this.arealameArr.push(1)
              this.arealameIndex = i
            }
 
            // type
            if (
              data[i].type === data[i - 1].type &&
              data[i].id === data[i - 1].id
            ) {
              this.typeArr[this.typeIndex] += 1
              this.typeArr.push(0)
            } else {
              this.typeArr.push(1)
              this.typeIndex = i
            }
 
            // planceName
            if (
              data[i].planceName === data[i - 1].planceName &&
              data[i].id === data[i - 1].id
            ) {
              this.planceNameArr[this.planceNameIndex] += 1
              this.planceNameArr.push(0)
            } else {
              this.planceNameArr.push(1)
              this.planceNameIndex = i
            }
 
            // scenicPersonCount
            if (
              data[i].scenicPersonCount === data[i - 1].scenicPersonCount &&
              data[i].id === data[i - 1].id
            ) {
              this.scenicPersonCountArr[this.scenicPersonCountIndex] += 1
              this.scenicPersonCountArr.push(0)
            } else {
              this.scenicPersonCountArr.push(1)
              this.scenicPersonCountIndex = i
            }
 
            // cameracount
            if (
              data[i].cameracount === data[i - 1].cameracount &&
              data[i].scenicPersonCount === data[i - 1].scenicPersonCount &&
              data[i].id === data[i - 1].id
            ) {
              this.cameracountArr[this.cameracountIndex] += 1
              this.cameracountArr.push(0)
            } else {
              this.cameracountArr.push(1)
              this.cameracountIndex = i
            }
 
            // scenicArchivescount
            if (
              data[i].scenicArchivescount === data[i - 1].scenicArchivescount &&
              data[i].scenicPersonCount === data[i - 1].scenicPersonCount &&
              data[i].id === data[i - 1].id
            ) {
              this.scenicArchivescountArr[this.scenicArchivescountIndex] += 1
              this.scenicArchivescountArr.push(0)
            } else {
              this.scenicArchivescountArr.push(1)
              this.scenicArchivescountIndex = i
            }
          }
        }
      }
    },
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 ) {
        // 第一列 arealame
        const _row_1 = this.arealameArr[rowIndex]
        const _col_1 = _row_1 > 0 ? 1 : 0
        return {
          rowspan: _row_1,
          colspan: _col_1
        }
      } else if (columnIndex === 1) {
        // 第二列 type
        const _row_2 = this.typeArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 2) {
        // 第三列 planceName
        const _row_2 = this.planceNameArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 3) {
        // 第四列 scenicPersonCount
        const _row_2 = this.scenicPersonCountArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 4) {
        // 第五列 cameracount
        const _row_2 = this.cameracountArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 4) {
        // 第六列 scenicArchivescount
        const _row_2 = this.scenicArchivescountArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      }
    }
  }
}
</script>
</style>

三. 隔行变色不生效

参考链接：https://segmentfault.com/a/1190000041320841

四. Echarts

在这里插入图片描述

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '个性化' },
        { value: 735, name: '案事件' },
        { value: 580, name: '处罚信息' },
        { value: 484, name: '摄像头' },
        { value: 300, name: '从业人员' }
      ]
    }
  ]
};
吃小猫的大鱼
关注
专栏目录
element-plus中的el-table如何动态合并行（复制粘贴即可使用 亲测有效！）
qq_39291270的博客
04-09 198
【代码】element-plus中的el-table如何动态合并行（复制粘贴即可使用 亲测有效！
深入探索 ElementUI el-table 行列合并
最新发布
繁依Fanyi的博客
08-13 1950
在前端开发中，数据展示一直是一个重要的部分，而表格则是数据展示最常见的形式之一。ElementUI 是饿了么前端团队推出的一款基于 Vue 的 UI 组件库，其中的 el-table 组件是一个功能强大且灵活的表格组件。今天我们要详细探讨的是 el-table 的行列合并操作。
Element-UI中，el-table动态合并多列的行
小匠的Blog
01-11 1531
在使用Element-UI的el-table组件时，我们有时需要根据数据动态合并行或列，以更好地展示数据。在本文中，我们将介绍如何在Element-UI中实现这一功能。
el-table表格动态合并行、合并行列及详解_el-table 合并行
2401_85124666的博客
06-12 5409
在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下： 而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下： 所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单 是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下： 首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）
VUE项目中el-table动态合并列单元格（附带代码解析注释）
DDD4V的博客
06-21 8570
el-table动态列合并
el-table 动态合并行/列单元格
Stitch_xiao的博客
12-02 467
原文地址：El-Table 动态合并行/列单元格 | nowhere.ink
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
vue使用el-table动态合并列及行
mysunli的博客
01-27 2147
前两天项目中需要用到表单合并，特此记录，放便以后使用。 首先我使用的element-ui中的el-table，文档中提供span-method方法可以实现合并行或列，大家不熟悉的可以去看看element文档地址，但是文档提供的例子很简单，不能满足复杂的页面，所以需要处理一下数据。 如下代码： getListDataForRowAndColumn(data){ let self = this; self.rowAndColumn...
el-table动态合并行
AiGarry的博客
08-14 854
el-table动态合并行
vue + el-table 动态合并单元格
qq_42309277的博客
09-28 1148
- 需求说明： 1. 合并相同项单元格 2. 部分单元格合并需要额外叠加条件 3. 可动态增减 - 实现思路 通过倒序遍历数组，符合条件时使用combineProp进行累加，并设置当前单元格属性rowspan和colspan为0，直到不符合条件后对当前项rowspan进行赋值 - 实现效果 - 完整代码地址 https://github.com/lolStoneLee/mergeTable.git- 合并逻辑代码 - 合并代码如下 ........ data:...
vue elementui 动态表头、表头合并、合并行、合并列、行根据某字段内容一致的进行合并、表格列展开收起功能
DarlingYL的博客
10-30 1万+
vue elementui 动态表头、表头合并、合并行、合并列、行根据某字段内容一致的进行合并、表格列展开收起功能
Vue+Element-UI el-table表格根据指定条件动态合并行span-method
misschengispink的博客
03-26 1644
el-table标签上定义span-method方法methods里增加spanMethod方法return {rowspan: row.rowspan, // 需要合并的行数colspan: 1} else {// 不合并return {colspan: 0。
el-table表格动态合并相同数据单元格(可指定列+自定义合并)
泶雪乖女
04-07 6676
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。我们可以看到，所有列，只要数据相同的单元格都被合并了，包括我不想合并的单元格，这时候就要。只需要加个if判断即可指定要合并哪些列。这样就只合并了我们指定的那几列了。这时候再看，就是我们想要的效果了。
element table动态合并行、列
weixin_42115781的博客
06-21 543
以上面表格举例，表格需要以服务为主体显示，并且服务的数量不确定，表格数据是 资料对象集合，假设表格数据是按照服务名排序，如下 this.informationData = [ { service: '服务1', name: '营业执照', description: 'u一卡通一会发到付v但是v的', check: false }, { service: '服务1', name: '营业执照', description: 'u一卡通一会发到付v但是v的',..
el-table动态合并相同的行或列
weixin_45832746的博客
09-06 950
上方的方法都是合并行，要合并列根据需求修改即可。
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
热门推荐
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
el-table 动态合并行
Beloved_Jodie的博客
09-10 232
数组下对象去重 // 去重 let obj={} this.dataList=this.dataList.reduce((item,next)=>{ obj[next.projectcode]?'':obj[next.projectcode]=true&&item.push(next) return item },[]) el-table 改变第几行字体颜色 <el-table
vue+elementui点击合并表格数据
05-20
要实现点击合并表格数据，需要使用 Element UI 提供的表格组件和相关 API。以下是一个基本的实现方法： 1. 定义表格的数据格式，包括表头和内容。 2. 在表格组件中使用 `table-row-class-name` 属性来设置行的样式名。这个属性接受一个函数，函数的参数为当前行的数据对象，返回值为这一行的样式名。 3. 在样式名函数中，根据当前行的数据对象判断是否需要和前一行合并，如果需要合并，则返回一个特定样式名。 4. 使用 `span-method` 属性来定义合并单元格的方法。这个属性接受一个函数，函数的参数为当前单元格的行列信息，返回值为一个包含 `rowspan` 和 `colspan` 属性的对象，用于指定合并的行数和列数。 下面是一个示例代码： ```html <template> <el-table :data="tableData" :row-class-name="rowClassName" :span-method="spanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <<el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '男' }, { name: '王五', age: 22, gender: '女' }, { name: '赵六', age: 25, gender: '女' }, ], }; }, methods: { rowClassName(row, index) { if (index > 0 && row.gender === this.tableData[index - 1].gender) { // 如果和前一行性别相同，则需要合并 return 'merge-row'; } return ''; }, spanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 2 && rowIndex > 0 && row.gender === this.tableData[rowIndex - 1].gender) { // 如果是第三列，并且和前一行性别相同，则需要合并 return { rowspan: 0, colspan: 0 }; } }, }, }; </script> <style> .merge-row td:nth-child(3) { /* 第三列需要合并 */ border-top-width: 0 !important; /* 去掉上边框 */ } </style> ``` 在上面的代码中，我们定义了一个表格，包含三列：姓名、年龄、性别。然后，我们使用 `row-class-name` 属性来设置行的样式名，如果一行需要和前一行合并，则返回一个特定样式名。在样式中，我们设置第三列的单元格不显示上边框。最后，我们使用 `span-method` 属性来定义合并单元格的方法，如果一个单元格需要合并，则返回一个包含 `rowspan` 和 `colspan` 属性的对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值