vue element ui 表格有相同数据合并单元格

这篇具有很好参考价值的文章主要介绍了vue element ui 表格有相同数据合并单元格。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先看效果  

vue element ui 表格有相同数据合并单元格

 

前提是你的数据是扁平的数据因为要根据上下数据是否一样才合并的  如果是子级数据需要改一下数据格式了

下面是数据的样式

tableData: [{
          id: '1',
          name: '王小虎',
          amount1: '165',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '1',
          name: '王小虎',
          amount1: '162',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '1',
          name: '王we虎',
          amount1: '621',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '2',
          name: '王we虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '3',
          name: '王小虎',
          amount1: '621',
          amount2: '4.1',
          amount3: 15
        }],

 

 合并单元格的重点属性就是 :summary-method="" 这个是关键

<el-table ref="tableRef" show-summary :summary-method="getSummaries" :span-method="handleSpanMethod"  :data="listData"  border style="width: 100%; margin-top: 5px">
      <el-table-column label="No." type="index" align="center" width="50"></el-table-column>
      <el-table-column prop="checkResult" label="Check result"> </el-table-column>
      <el-table-column prop="standardChineseName" label="Standard chinese name"> </el-table-column>
      <el-table-column prop="ingredientInciCtfaName" label="Ingredient INCI(CTFA) name"> </el-table-column>
      <el-table-column prop="RMInFormula" label="RM in formula(%)"> </el-table-column>
      <el-table-column prop="ingredientInRM" label="Ingredient in RM(%)"> </el-table-column>
      <el-table-column prop="ingredientInFormula" label="Ingredient in formula(%)"> </el-table-column>
      <el-table-column prop="purposeOfUse" label="Purpose of use"> </el-table-column>
      <el-table-column prop="templateUrl5" label="New RM" align="center" width="100"> </el-table-column>
    </el-table>
data() {
    return {
      listData: [],

      // 合并单元格
      column1Arr: [], // column1
      column1Index: 0, // column1索引

      column2Arr: [], // column2
      column2Index: 0, // column2索引

      column3Arr: [], // column3
      column3Index: 0, // column3索引

      column4Arr: [], // column4
      column4Index: 0, // column4索引

      column5Arr: [], // column5
      column5Index: 0, // column5索引

      column6Arr: [], // column6
      column6Index: 0, // column6索引

      column7Arr: [], // column7
      column7Index: 0, // column7索引
    }
  },
mergeTable(data) {
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必须存在,以第一行为基准  合并的数量根据直接需求改
            this.column1Arr.push(1) // column1
            this.column1Index = 0
            this.column2Arr.push(1) // column2
            this.column2Index = 0

            this.column3Arr.push(1) // column3
            this.column3Index = 0

            this.column4Arr.push(1) // column4
            this.column4Index = 0

            this.column5Arr.push(1) // column5
            this.column5Index = 0

            this.column6Arr.push(1) // column6
            this.column6Index = 0

            this.column7Arr.push(1) // column7
            this.column7Index = 0
          } else {
            // 判断当前元素与上一元素是否相同   
            // 我是根据第一个数据合并后续才可以合并 
            //如果是 根据当前表格的前一列可以在每一个 column1++   后面添加上前一个表格的列            
            // 如果是只要相同就合并那就每个column 里面的条件直接当前列就可以了
    
            // column1
            if (data[i].checkResult === data[i - 1].checkResult) {
              this.column1Arr[this.column1Index] += 1
              this.column1Arr.push(0)
            } else {
              this.column1Arr.push(1)
              this.column1Index = i
            }

            // column2
              if (data[i].standardChineseName === data[i - 1].standardChineseName && data[i].checkResult === data[i - 1].checkResult) {
                this.column2Arr[this.column2Index] += 1
                this.column2Arr.push(0)
              } else {
                this.column2Arr.push(1)
                this.column2Index = i
              }

              // column3
              if (data[i].ingredientInciCtfaName === data[i - 1].ingredientInciCtfaName && data[i].checkResult === data[i - 1].checkResult) {
                this.column3Arr[this.column3Index] += 1
                this.column3Arr.push(0)
              } else {
                this.column3Arr.push(1)
                this.column3Index = i
              }

              // column4
              if (data[i].RMInFormula === data[i - 1].RMInFormula && data[i].checkResult === data[i - 1].checkResult) {
                this.column4Arr[this.column4Index] += 1
                this.column4Arr.push(0)
              } else {
                this.column4Arr.push(1)
                this.column4Index = i
              }

              // column5
              if (data[i].ingredientInRM === data[i - 1].ingredientInRM && data[i].checkResult === data[i - 1].checkResult) {
                this.column5Arr[this.column5Index] += 1
                this.column5Arr.push(0)
              } else {
                this.column5Arr.push(1)
                this.column5Index = i
              }

              // column6
              if (data[i].ingredientInFormula === data[i - 1].ingredientInFormula && data[i].checkResult === data[i - 1].checkResult) {
                this.column6Arr[this.column6Index] += 1
                this.column6Arr.push(0)
              } else {
                this.column6Arr.push(1)
                this.column6Index = i
              }

              // column7
              if (data[i].purposeOfUse === data[i - 1].purposeOfUse && data[i].checkResult === data[i - 1].checkResult) {
                this.column7Arr[this.column7Index] += 1
                this.column7Arr.push(0)
              } else {
                this.column7Arr.push(1)
                this.column7Index = i
              }
          }
        }
      }
    },
    
    //我这里是在表格的第二列开始合并因为第一列是 序号 不可以合并  从第一个开始合并就把 下表
    //改为0  columnIndex === 0
    handleSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        // 第二列 column2
        const _row_1 = this.column1Arr[rowIndex]
        const _col_1 = _row_1 > 0 ? 1 : 0
        return {
          rowspan: _row_1,
          colspan: _col_1,
        }
      } 
      else if (columnIndex === 2) {
        // 第三列 column3
        const _row_2 = this.column2Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2,
        }
      } else if (columnIndex === 3) {
        // 第四列 column4
        const _row_3 = this.column3Arr[rowIndex]
        const _col_3 = _row_3 > 0 ? 1 : 0
        return {
          rowspan: _row_3,
          colspan: _col_3,
        }
      } else if (columnIndex === 4) {
        // 第五列 column5
        const _row_4 = this.column4Arr[rowIndex]
        const _col_4 = _row_4 > 0 ? 1 : 0
        return {
          rowspan: _row_4,
          colspan: _col_4,
        }
      } else if (columnIndex === 5) {
        // 第六列 column6
        const _row_5 = this.column5Arr[rowIndex]
        const _col_5 = _row_5 > 0 ? 1 : 0
        return {
          rowspan: _row_5,
          colspan: _col_5,
        }
      } else if (columnIndex === 6) {
        // 第七列 column7
        const _row_6 = this.column6Arr[rowIndex]
        const _col_6 = _row_6 > 0 ? 1 : 0
        return {
          rowspan: _row_6,
          colspan: _col_6,
        }
      } else if (columnIndex === 7) {
        // 第八列 column8
        const _row_7 = this.column7Arr[rowIndex]
        const _col_7 = _row_7 > 0 ? 1 : 0
        return {
          rowspan: _row_7,
          colspan: _col_7,
        }
      }
    },
//调取接口获取数据
getList() {
      const prams = {
        taskId: this.taskId,
        formulaId: this.formulaId
      }
      this.$http({
        headers: {
          'Content-Type': 'application/json',
        },
        method: 'post',
        url: '/123123',
        data: prams,
      })
      .then(res=>{
        this.listData = res.data.records //给data变量赋值
        this.mergeTable(this.listData)//合并单元格传入数据
      })
      //清空之前的数据  不清空 表格数据就会乱套
      this.column1Arr = []
      this.column1Index = 0
      this.column2Arr = []
      this.column2Index = 0
      this.column3Arr = []
      this.column3Index = 0
      this.column4Arr = []
      this.column4Index = 0
      this.column5Arr = []
      this.column5Index = 0
      this.column6Arr = []
      this.column6Index = 0
      this.column7Arr = []
      this.column7Index = 0
    },

完整代码文章来源地址https://www.toymoban.com/news/detail-504197.html

<template>
  <div>
    <el-table ref="tableRef" show-summary :summary-method="getSummaries" :span-method="handleSpanMethod"  :data="listData"  border style="width: 100%; margin-top: 5px">
      <el-table-column label="No." type="index" align="center" width="50"></el-table-column>
      <el-table-column prop="checkResult" label="Check result"> </el-table-column>
      <el-table-column prop="standardChineseName" label="Standard chinese name"> </el-table-column>
      <el-table-column prop="ingredientInciCtfaName" label="Ingredient INCI(CTFA) name"> </el-table-column>
      <el-table-column prop="RMInFormula" label="RM in formula(%)"> </el-table-column>
      <el-table-column prop="ingredientInRM" label="Ingredient in RM(%)"> </el-table-column>
      <el-table-column prop="ingredientInFormula" label="Ingredient in formula(%)"> </el-table-column>
      <el-table-column prop="purposeOfUse" label="Purpose of use"> </el-table-column>
      <el-table-column prop="templateUrl5" label="New RM" align="center" width="100"> </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
export default {
  components: {},
  data() {
    return {
      listData: [],

      // 合并单元格
      column1Arr: [], // column1
      column1Index: 0, // column1索引

      column2Arr: [], // column2
      column2Index: 0, // column2索引

      column3Arr: [], // column3
      column3Index: 0, // column3索引

      column4Arr: [], // column4
      column4Index: 0, // column4索引

      column5Arr: [], // column5
      column5Index: 0, // column5索引

      column6Arr: [], // column6
      column6Index: 0, // column6索引

      column7Arr: [], // column7
      column7Index: 0, // column7索引
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  mounted() {
    
  },
  methods: {
    getList() {
      const prams = {
        taskId: this.taskId,
        formulaId: this.formulaId
      }
      this.$http({
        headers: {
          'Content-Type': 'application/json',
        },
        method: 'post',
        url: '/1123123123',
        data: prams,
      })
      .then(res=>{
        this.listData = res.data.records//给data中的变量赋值 把res.data.records换成自己
//的据接口 更改一下数据的字段 便可以直接使用了  
        this.mergeTable(this.listData)//合并单元格传入数据
      })
      //清空之前的数据
      this.column1Arr = []
      this.column1Index = 0
      this.column2Arr = []
      this.column2Index = 0
      this.column3Arr = []
      this.column3Index = 0
      this.column4Arr = []
      this.column4Index = 0
      this.column5Arr = []
      this.column5Index = 0
      this.column6Arr = []
      this.column6Index = 0
      this.column7Arr = []
      this.column7Index = 0
    },
    mergeTable(data) {
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必须存在,以第一行为基准
            this.column1Arr.push(1) // column1
            this.column1Index = 0
            this.column2Arr.push(1) // column2
            this.column2Index = 0

            this.column3Arr.push(1) // column3
            this.column3Index = 0

            this.column4Arr.push(1) // column4
            this.column4Index = 0

            this.column5Arr.push(1) // column5
            this.column5Index = 0

            this.column6Arr.push(1) // column6
            this.column6Index = 0

            this.column7Arr.push(1) // column7
            this.column7Index = 0
          } else {
            // 判断当前元素与上一元素是否相同
            // column1
            if (data[i].checkResult === data[i - 1].checkResult) {
              this.column1Arr[this.column1Index] += 1
              this.column1Arr.push(0)
            } else {
              this.column1Arr.push(1)
              this.column1Index = i
            }

            // column2
              if (data[i].standardChineseName === data[i - 1].standardChineseName && data[i].checkResult === data[i - 1].checkResult) {
                this.column2Arr[this.column2Index] += 1
                this.column2Arr.push(0)
              } else {
                this.column2Arr.push(1)
                this.column2Index = i
              }

              // column3
              if (data[i].ingredientInciCtfaName === data[i - 1].ingredientInciCtfaName && data[i].checkResult === data[i - 1].checkResult) {
                this.column3Arr[this.column3Index] += 1
                this.column3Arr.push(0)
              } else {
                this.column3Arr.push(1)
                this.column3Index = i
              }

              // column4
              if (data[i].RMInFormula === data[i - 1].RMInFormula && data[i].checkResult === data[i - 1].checkResult) {
                this.column4Arr[this.column4Index] += 1
                this.column4Arr.push(0)
              } else {
                this.column4Arr.push(1)
                this.column4Index = i
              }

              // column5
              if (data[i].ingredientInRM === data[i - 1].ingredientInRM && data[i].checkResult === data[i - 1].checkResult) {
                this.column5Arr[this.column5Index] += 1
                this.column5Arr.push(0)
              } else {
                this.column5Arr.push(1)
                this.column5Index = i
              }

              // column6
              if (data[i].ingredientInFormula === data[i - 1].ingredientInFormula && data[i].checkResult === data[i - 1].checkResult) {
                this.column6Arr[this.column6Index] += 1
                this.column6Arr.push(0)
              } else {
                this.column6Arr.push(1)
                this.column6Index = i
              }

              // column7
              if (data[i].purposeOfUse === data[i - 1].purposeOfUse && data[i].checkResult === data[i - 1].checkResult) {
                this.column7Arr[this.column7Index] += 1
                this.column7Arr.push(0)
              } else {
                this.column7Arr.push(1)
                this.column7Index = i
              }
          }
        }
      }
    },

    handleSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        // 第二列 column2
        const _row_1 = this.column1Arr[rowIndex]
        const _col_1 = _row_1 > 0 ? 1 : 0
        return {
          rowspan: _row_1,
          colspan: _col_1,
        }
      } 
      else if (columnIndex === 2) {
        // 第三列 column3
        const _row_2 = this.column2Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2,
        }
      } else if (columnIndex === 3) {
        // 第四列 column4
        const _row_3 = this.column3Arr[rowIndex]
        const _col_3 = _row_3 > 0 ? 1 : 0
        return {
          rowspan: _row_3,
          colspan: _col_3,
        }
      } else if (columnIndex === 4) {
        // 第五列 column5
        const _row_4 = this.column4Arr[rowIndex]
        const _col_4 = _row_4 > 0 ? 1 : 0
        return {
          rowspan: _row_4,
          colspan: _col_4,
        }
      } else if (columnIndex === 5) {
        // 第六列 column6
        const _row_5 = this.column5Arr[rowIndex]
        const _col_5 = _row_5 > 0 ? 1 : 0
        return {
          rowspan: _row_5,
          colspan: _col_5,
        }
      } else if (columnIndex === 6) {
        // 第七列 column7
        const _row_6 = this.column6Arr[rowIndex]
        const _col_6 = _row_6 > 0 ? 1 : 0
        return {
          rowspan: _row_6,
          colspan: _col_6,
        }
      } else if (columnIndex === 7) {
        // 第八列 column8
        const _row_7 = this.column7Arr[rowIndex]
        const _col_7 = _row_7 > 0 ? 1 : 0
        return {
          rowspan: _row_7,
          colspan: _col_7,
        }
      }
    }
}
</script>

到了这里,关于vue element ui 表格有相同数据合并单元格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于element-ui的table实现树级表格操作及单元格合并

    如题,公司业务需求,数据结构比较复杂,需要在一张表内实现多级树状数据展示及同属性的单元格合并,并在表格内实现增删改操作。 网上翻阅了很多实例,没有能解决所有需求的案例,于是自己实现了一套。 时间匆忙,逻辑有优化的地方还请无偿指出! 最终效果如下

    2024年02月14日
    浏览(49)
  • Vue+Element-UI 中 el-table 动态合并单元格 :span-method 方法

    记录一下工作时遇到的 el-table 合并单元格的需求,超详细😊 el-table官方提供了合并单元格的方法与返回格式 如下: 根据叙述有了如下思路: 因为后端返回的数据非统一, 可能不是按照类别排好的😨, 所以官网的例子满足不了所有的需求所以我们通过遍历table的数据比较前后两

    2024年02月12日
    浏览(66)
  • EasyExcel合并单元格(同列相同数据合并)

    合并后效果如下: 合并策略代码: 使用: 主体代码来自网络,按自己业务修改,支持多列相同数据合并。

    2024年02月12日
    浏览(40)
  • vue3 elementplus table根据某id相同合并单元格

    1.标签上加入合并方法 2.他会根据 pymt_pl_lmt_id 该值判断,相同的合并单元格。

    2024年02月11日
    浏览(38)
  • element ui中el-table的合并相同列内容的解决方法,简单实用

    element ui中el-table的合并相同列内容的解决方法,简单实用 废话不说,直接上代码,vue页面中的几个部分如下: 注意几点: 1、el-table中 写上: :span-method=“objectSpanMethod” 2、两个方法不用改动 3、想合并哪列,在data中columnArr数组里填上列名。 4、如果有bug,自己去调整吧 完事

    2024年02月11日
    浏览(51)
  • vue+element-UI实现跟随滚动条加载表格数据

    el-table当数据量大的时候,实现滚动到底部后加载数据,直接上js代码,有其他需求请各自更改  第一步、在data中定义两个数组 第二步、在数据发生改变的方法中先循环存放一部分数据用于页面显示 第三步、在mounted监听滚动事件

    2024年02月16日
    浏览(57)
  • element-ui 表格(table)合并表头下面合并列且可以收缩展开

    百度了一大堆,发现了首行不能合并,想到了用dom做,找到了下面这个链接 1、表头合并 —— 给table添加属性:header-cell-style=\\\"headerStyle\\\",里面给首行设置跨行 element-ui表头合并 - ^Mao^ - 博客园 2、表内合并 —— 给table添加属性:span-method=\\\"arraySpanMethod\\\",里面设置合并 Element - The wor

    2024年02月16日
    浏览(61)
  • Element ui el-table 合并单元格

      el-table v-loading=\\\"loading\\\" :data=\\\"tableData\\\" style=\\\"width: 100%\\\" highlight-current-row :span-method=\\\"arraySpanMethod\\\"         el-table-column type=\\\"index\\\" label=\\\"序号\\\" /         el-table-column v-for=\\\"item in formThead\\\" :key=\\\"item.label\\\" :label=\\\"item.label\\\" :prop=\\\"item.prop\\\" :formatter=\\\"item.formatter\\\" :width=\\\"item.width || \\\'auto\\\'\\\" /        

    2024年02月02日
    浏览(38)
  • 论element-ui表格的合并行和列(巨细节)

    ​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。 效果图: 代码: 这里只展示关键代码 先看看它们是怎么完成这个的: ​ 首先,看似是合并了行、实

    2023年04月13日
    浏览(47)
  • element-ui添加动态表格并合计行合并行操作

    项目开发过程中,我们有时候会遇到表格里面数据进行动态添加修改删除的操作,表格里面我们也会经常遇到合并单元格和合计累加计算行的数据。这里我们就简单的记录一下实际场景的运用! 最终实现的效果图如下: 注意:这里的新增操作人不能重复添加,新增的时候有

    2024年02月11日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包