vue element table表格相同名称列合并方式

目录
  • element table表格相同名称列合并
  • 对table表格相同内容行的合并

element table表格相同名称列合并

<template>
  <div>
    <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id" ref="tableDom" border>
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="分类" align="center"></el-table-column>
      <el-table-column prop="num1" label="数量1" align="center"></el-table-column>
      <el-table-column prop="num2" label="数量2" align="center"></el-table-column>
      <el-table-column prop="num3" label="数量3" align="center"></el-table-column>
      <el-table-column prop="type" label="类型" align="center"></el-table-column>
      <el-table-column prop="num4" label="数量4" align="center"></el-table-column>
      <el-table-column prop="num5" label="数量5" align="center"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      tableData: [{
        name: '名称1',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '连续',
        num5: '6',
        num6: '7',
      }, {
        name: '名称2',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '连续',
        num5: '6',
        num6: '7',
      }, {
        name: '名称2',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '连续',
        num5: '6',
        num6: '7',
      }, {
        name: '名称3',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '连续',
        num5: '6',
        num6: '7',
      }, {
        name: '名称4',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '连续',
        num5: '6',
        num6: '7',
      }, {
        name: '名称4',
        num1: '2',
        num2: '3',
        num3: '4',
        num4: '连续',
        num5: '6',
        num6: '7',
      }]
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 合计
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 2 || index === 7) {
          const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = ''
        }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // table合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let data = this.tableData; //拿到当前table中数据
      let cellValue = row[column.property]; //当前位置的值
      let noSortArr = ['num1', 'num2', 'num3', 'num4', 'num5', 'num6']; //不需要合并的字段(不进行合并行的prop)
      if (cellValue && !noSortArr.includes(column.property)) {
        let prevRow = data[rowIndex - 1]; //获取到上一条数据
        let nextRow = data[rowIndex + 1]; //下一条数据
        if (prevRow && prevRow[column.property] === cellValue) { //当有上一条数据,并且和当前值相等时
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) { //当有下一条数据并且和当前值相等时,获取新的下一条
            nextRow = data[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
  }
}
</script>
<style scoped lang="less">
</style>

对table表格相同内容行的合并

在vue开发中会有对表格的操作,有时因为需要遍历的情况不同,对于数据相同行处理时,使用element的table不太好实现,还是使用html的table标签!

而此时,对于相同数据行,使用rowspan进行合并则无法更好的遍历数据,比如我们要实现这样的表格

数据格式一看,使用遍历的话会更好实现,这个时候表格是这样的

这个时候可以使用方法获取相同内容行,对其进行处理,方法如下

 mergeTable() {  //table表合并相同内容的行
      var tab = document.getElementById("subtable");
      var maxCol = 3, val, count, start;
      // var ys = "";
      for (var col = maxCol - 1; col >= 0 ; col--) {
        count = 1;
        val = "";
        for (var i = 0; i < tab.rows.length; i++) {
          if (val == tab.rows[i].cells[col].innerHTML) {
            count++;
          } else {
          if (count > 1) {
            //合并
            start = i - count;
            tab.rows[start].cells[col].rowSpan = count;
            for (var j = start + 1; j < i; j++) { //
                tab.rows[j].cells[col].style.display = "none";
                tab.rows[j].removeChild(tab.rows[j].cells[col]);
            }
            count = 1;
            }
            val = tab.rows[i].cells[col].innerHTML;
          }
        }

          if (count > 1) { //合并,最后几行相同的情况下
            start = i - count;
            tab.rows[start].cells[col].rowSpan = count;
            for (var j = start + 1; j < i; j++) {
              tab.rows[j].removeChild(tab.rows[j].cells[col]);
            }
          }
      }
    }

然后在生命周期函数这调用该方法即可实现对相同内容行的合并操作!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue ELement Table技巧表格业务需求实战示例

    目录 前言 常见业务 需求:合并行 思路分析 需求合并列 思路分析 前言 在我们日常开发中,表格业务基本是必不可少的,对于老手来说确实简单,家常便饭罢了,但是对于新手小白如何最快上手搞定需求呢?本文从思路开始着手,帮你快速搞定表格. 常见业务 需求:合并行 1. 合并条码一样的两行 2. 触摸高亮关闭,表格颜色重一点 思路分析 调取element Table的回调 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当

  • Element中table组件按照属性执行合并操作详解

    在实际开发中,要求使用elementUI的table组件对表格数据上下行相邻相同的数据进行合并,在elem官网上查看到是有对应的组件和合并方法 <el-table :data="tableData" :span-method="objectSpanMethod"> <el-table-column prop="id" label="ID" width="180"> </el-t

  • vue+elementUI封装一个根据后端变化的动态table(完整代码)

    实现了自动生成和插槽两个方式,主要把 el-table 和el-pagination封装在一起 效果图: 使用组件,启用自动生成 :auto="true" 自动生成-编辑 (包括请求已经实现了)新增和删除也是一样 ps:如有额外的按钮可以用插槽实现 查询的时候,只需要多返回下面数据,就可以自动生成列,和对应操作按钮 目录 table.vue <template> <div> <el-row v-if="auto"> <el-

  • Vue技巧Element Table二次封装实战示例

    目录 前言 思考 实践 filterPane.vue 明确目标 传入数据结构整理 timeSelect elinput elselect 开始封装 tablePane.vue 明确目标 传入数据结构整理 tool cols pageData operation tablePane.vue配置项Cols详解 开始封装 实战 结尾 前言 由于重构后台管理项目中有好多表格页面, 举个栗子 这表格看着还挺好看,写起来叫人直呼XX,多动脑子少掉发,少走弯路多省鞋. 写了一个后感觉太麻烦了,于是我奋笔疾书,

  • vue element-ui里的table中表头与表格出现错位的解决

    目录 element-ui里的table中表头与表格出现错位 解决方案 element-ui表格样式错乱调整方式 1.线没有对齐 2.fixed固定导致的高度问题 3.去掉鼠标hover修改背景色事件 element-ui里的table中表头与表格出现错位 现象: 原因:电脑显示的缩放引起的,并且发现同为webkit内核的Google浏览器和360浏览器中360浏览器显示正常,而Google浏览器才会出现这个问题. 解决方案 找到项目入口文件(敲黑板重点!!),添加全局样式: .el-table

  • vue element table表格相同名称列合并方式

    目录 element table表格相同名称列合并 对table表格相同内容行的合并 element table表格相同名称列合并 <template> <div> <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id"

  • vue+element table表格实现动态列筛选的示例代码

    需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项 用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen

  • vue element table 表格请求后台排序的方法

    1.ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据. <el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descendin

  • Vue Elenent实现表格相同数据列合并

    本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下 作者:秋名 思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并.(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰.) template: <el-table :span-method="objectSpanMethod4" //在el-table里面添加合并单元格属性 > Js: da

  • element Table表格组件多字段(多列)排序方法

    目录 需求: 遇到的问题: 解决: 需求: element表格多列排序,点击日期的排序,然后再点击姓名的排序,将两个排序字段传给后端排序 遇到的问题: element的Table组件只支持单列排序,当你点击另一列的排序的时候,会自动取消上一个排序.网上搜了一下方法,这篇文章提出用:header-cell-class-name 和 @sort-change来处理多列排序的样式问题,我试了半天,发现这个sort-change事件在取消排序的时候会返回null,使我根本定位不到是哪一列取消了排序,总而

  • vue elementUI table 自定义表头和行合并的实例代码

    最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染表头. 而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下. 1.自定义表头 代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是"序号",那么header

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

  • vue element实现表格合并行数据

    本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下 支持不分页的表格数据,分页的表格数据还有小bug <template> <el-container> <el-main> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod" //添加这个实

  • vue+element实现表格新增、编辑、删除功能

    几天前,需要做一个需求:新增一个xml文件时,添加数量不确定.属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于mysql给表里填数据一样. 可是目前似乎还没有表格的直接增删改一行的操作,那要怎么实现呢?于是,通过上网以及自己的思考,终于实现了,代码.思路以及效果图如下: 1 html部分: <el-button type="success" @click="addRow(tableData)"&

随机推荐