vue 相同列合并（复制粘贴可用）

最新推荐文章于 2025-10-22 22:35:03 发布
原创 最新推荐文章于 2025-10-22 22:35:03 发布 · 619 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

该文章提供了一个Vue.js组件的模板代码，展示了如何在el-table中合并相同列，主要用于数据展示时优化表格布局。通过`span-method`属性和自定义方法`spanMethod`实现了单元格的合并。代码包括了数据初始化、事件处理以及样式设置。

vue 相同列合并（复制粘贴可用）


废话不多说，直接上代码

<template>
  <div class="content_home">
    <div class="content_home_start">
      <div class="conter_table">
        <el-row :gutter="11">
          <el-col :span="3">
            <el-select placeholder="地点"
              type="text"
              v-model="earecode"
              autocomplete="off"
            >
                <el-option
                  v-for="item in eareOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
                </el-option>
            </el-select>
          </el-col>
          <!-- <el-col :span="3">
            <el-select v-model="findcolumn" placeholder="查询项">
              <el-option
                v-for="item in columnOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-input v-model="findcontent" placeholder="查询内容">
            </el-input>
          </el-col> -->
          <el-col :span="2">
            <el-button type="primary"  style="width: 100%" @click="findRegPersonList">
              <i class="el-icon-search"></i>查询</el-button
            >
          </el-col>
        </el-row>
         <!--下方为日程列表-->
        <el-table
          :data="tableDataList"
          :span-method="spanMethod"
          border
          style="width: 70%; margin-top: 20px; margin-left;: 1000px">
          <el-table-column
            prop="eareid"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="eareid"
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="earename"
            label="地市"
            width="180">
          </el-table-column>
          <el-table-column
            prop="examdays"
            label="考试天数"
            width="180">
          </el-table-column>
          <el-table-column
            prop="examdate"
            label="考试日期">
          </el-table-column>
          <el-table-column label="操作" align="center" width="320">
            <template slot-scope="scope">
              <el-button type="primary" plain size="mini" @click="showdetail(scope.row)">详细</el-button>
              <el-button type="primary" plain size="mini" v-if="scope.row.empowerType=='1' ||scope.row.empowerType=='0' " @click="closeEmpowerType(scope.row)">关闭授权</el-button>
              <el-button type="primary" plain size="mini" v-if="scope.row.empowerType=='2'" @click="openEmpowerType(scope.row)">开启授权</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="margin-top: 15px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import { } from '@/api/person';

export default {
  name: 'pershenhe',
  components: {
    
  },
  data() {
    return {
      currentPage: 1,
      pageSizes: [2,5,10, 30, 50, 100, 200, 300],
      pageSize: 10,
      total: 0,
      perlist:[] ,
      columnOptions:[],//查询项
      eareOptions:[],//查询考点
      findcolumn:"",
      earecode:"" ,
      findcontent: "" ,
      
      tableDataList: [{
        eareid:'17',
        earename: '信阳',
        examdays: '4',
        examdate: '2023-07-01',
        empowerType:'0'
        }, {
          eareid:'17',
          earename: '信阳',
          examdays: '4',
          examdate: '2023-07-02',
          empowerType:'1'
        }, {
          eareid:'17',
          earename: '信阳',
          examdays: '4',
          examdate: '2023-07-07',
          empowerType:'2'
        }, {
          eareid:'17',
          earename: '信阳',
          examdays: '4',
          examdate: '2023-07-08',
          empowerType:'0'
        }, {
          eareid:'14',
          earename: '商丘',
          examdays: '3',
          examdate: '2023-07-01',
          empowerType:'0'
        }, {
          eareid:'14',
          earename: '商丘',
          examdays: '3',
          examdate: '2023-07-02',
          empowerType:'1'
        }, {
          eareid:'14',
          earename: '商丘',
          examdays: '3',
          examdate: '2023-07-07',
          empowerType:'2'
        }
        , {
          eareid:'15',
          earename: '周口',
          examdays: '1',
          examdate: '2023-07-01',
          empowerType:'1'
        }],

        spanMap: {},
    };
  },
  mounted() {
    this.getRegPersonList();
    this.getInitOptionsData();
    this.initSpanArr(this.tableDataList, 'earename');
    this.initSpanArr(this.tableDataList, 'examdays');
    
  },
  methods: {
    // 合并单元格
    spanMethod( {rowIndex, column: {property}} ){
      if(this.spanMap[property]){
        const _row = this.spanMap[property].spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
        rowspan: _row,
        colspan: _col,
      };
      }
    },
    // 单元格合并方法
    initSpanArr( data, column ){
      let contactDot = 0;
      this.spanMap[column] = {};
      this.spanMap[column].spanArr = [];
      data.forEach(( item, index ) => {
        if(index === 0){
        this.spanMap[column].spanArr.push(1); // 第一行数据 不合并
      } else {
        if(item[column] === data[index - 1][column]){
          this.spanMap[column].spanArr[contactDot] += 1; // 下一行，如果数据相同，合并行数加一
        this.spanMap[column].spanArr.push(0);
        } else{
          contactDot = index;
        this.spanMap[column].spanArr.push(1);
        }
      }
      });
    },
    
    // 关闭授权
    closeEmpowerType(row) {

    },

    // 开启授权
    openEmpowerType(row) {

    },

    // 展示授权详情
    showdetail(row) {
      console.log(row);
    },

    getSpanArr(data) {
      this.spanArrOrd = []
    },


    headClass() {
      // 表格table头第一行的背景
      return "text-align: center;background:#eef1f6;";
    },
    
    getInitOptionsData(){
        this.getEareSel();
        this.getColumnOp();
    },
    findRegPersonList(){
      this.currentPage = 1
      this.getRegPersonList()
    },
    getRegPersonList(){

    },
    handleSizeChange(val) {
      //改变每页条数的动作事件
      this.pageSize = val;
      this.currentPage = 1; //改变每页条数，从第一页开始
      this.getRegPersonList();
    },
    handleCurrentChange(val) {
      //改变页数的动作事件
      this.currentPage = val;
      this.getRegPersonList();
    },
    getEareSel(){
    //获取考点下拉选
      this.eareOptions=[{value:"",label:"请选择考点地区"},{value:"1",label:"省直"},{value:"2",label:"郑州市"},{value:"3",label:"开封市"},{value:"4",label:"洛阳市"},{value:"5",label:"平顶山市"},{value:"6",label:"新乡市"},
          {value:"7",label:"焦作市"},{value:"8",label:"濮阳市"},{value:"9",label:"鹤壁市"},{value:"10",label:"安阳市"},{value:"11",label:"三门峡市"},{value:"12",label:"许昌市"},
          {value:"13",label:"漯河市"},{value:"14",label:"商丘市"},{value:"15",label:"周口市"},{value:"16",label:"驻马店市"},{value:"17",label:"信阳市"},{value:"18",label:"南阳市"},
          {value:"19",label:"济源市"},{value:"28",label:"新蔡县"},{value:"35",label:"巩义市"},{value:"37",label:"永城市"},{value:"38",label:"固始"},{value:"39",label:"邓州市"},
          {value:"41",label:"兰考县"},{value:"42",label:"汝州市"},{value:"43",label:"滑县"},{value:"44",label:"长垣县"},{value:"45",label:"鹿邑县"},]
    },
    getColumnOp(){
      this.columnOptions=[{value:"",label:"请选择查询项"},{value:"username",label:"账户"},{value:"responsname",label:"负责人姓名"},{value:"respstelpone",label:"负责人联系方式"},
        {value:"operator",label:"操作人姓名"},{value:"operatortel",label:"操作人联系方式"}]
    },
    
  },
};
</script>

<style .scoped>
.content_home_start {
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.conter_table {
  margin-top: 10px;
  /* height: 600px; */
  /* padding: 35px 15px;
  border-radius: 5px;
  border: 1px solid gray;
  box-sizing: border-box; */
}
.el-dialog__body {
    padding: 2px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}
.el-row ::v-deep .el-input__inner{
  height: 40px;
}

.el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
}
</style>
hellotutu
关注
vue实现将一个数组内的相同数据进行合并
12-13
获取服务器传来的数组数据进行，找出其中价格相同的进行数量相加，合并该段数据： /** 先将传来的订单列表进行四舍五入，再将价格相同的订单进行合并 * @param {Object} orderList :要进行操作的订单 */ async mergeOrder(orderList) { console.log(orderList); let contrast_1 = JSON.parse(JSON.stringify(orderList)); for(let x in contrast_1){ contrast_1[x].trade_price = this.toD
vue+elementUI table 每列中含有相同值的单元格合并+单元格内容换行+取消鼠标悬停背景色
Christine的博客
12-28 3074
上一篇博客的合并只是针对某一列，这篇是针对每一列。
40-Vue之实现表格首列相同数据合并
小白的博客
04-18 923
Vue之实现表格首列相同数据合并
vue table id一样的列合并
weixin_43872691的博客
09-14 707
vue table id一样的列合并
vue element表格 相同单元格相同数据合并单元格
m0_58234730的博客
07-17 694
【代码】vue element表格 相同单元格相同数据合并单元格。
vxe-table vue table 表格组件功能
10-16
交互功能是vxe-table的一大亮点，组件支持单选、多选、排序、筛选、合并行或列等操作。排序功能可以让用户快速对表格中的数据进行升序或降序排列，筛选功能则可以将表格内容进行过滤，以快速找到符合特定条件的数据...
根据以上内容结合vue2生成完整代码示例 直接复制在项目中可用 无需联网
最新发布
11-22
我们之前讨论的是关于 simple-keyboard-pinyin 的使用方法，用户现在希望结合 Vue2 生成完整的、可直接复制到项目且无需联网的代码示例。 根据用户要求，我们需要提供一个 Vue2 组件，该组件将集成之前提到的拼音...
前端vue + js + vue实现类似3D饼图效果，图表用echats 配置写法，如何实现？
**My Coding Family**
10-22 748
🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！
vue中引入TinyMCE实现富文本编辑器
小球的博客
02-28 3956
vue tinymce 富文本编辑器
Vue Elenent实现表格相同数据列合并
01-22
本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下 作者：秋名 思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同一个表格，但是每一行，固定一列的数据都相同，即可使用合并单元格，做到了既美观，也清晰。） template： <el span-method=objectSpanMethod4> Js: data(){ return{ orderdata:null,// 后端将数据查询出来后，绑定到orderdata里
VUE2下版本的项目加入富文本框实现
du111_的博客
07-06 1086
即使看了很多文档，实践起来还是会存在很多坑的，捯饬了一下午，终于可以了，记录一下 本案例是采用tinymce这个插件，中文官网：http://tinymce.ax-z.cn/，直接进入 "三方集成专区" 查看 一、首先下载资源： npm installtinymce -S 但是只使用这个命令，虽然官网说的是一次将所有的依赖的包全下载下来，但是我npm run dev时，就会报出下面这个错：翻译为@tinymce/tinymce-vue/这个文件下的js找不到 那就是缺少这个依赖的下载...
vue-table实现相同项合并,跨行跨列计算
weixin_45408578的博客
09-12 1364
【代码】vue-table实现相同项合并,跨行跨列计算。
vue table列表中的数据相同多行合并
Tttrycatch的博客
07-27 643
参考地址。
vue 相同的id不合并_vue实现将一个数组内的相同数据进行合并
weixin_39551611的博客
12-21 743
获取服务器传来的数组数据进行，找出其中价格相同的进行数量相加，合并该段数据：/** 先将传来的订单列表进行四舍五入，再将价格相同的订单进行合并* @param {Object} orderList :要进行操作的订单*/async mergeOrder(orderList) {console.log(orderList);let contrast_1 = JSON.parse(JSON.strin...
【Vue+el-element】表格相同数据合并单元格
zuo0407的博客
09-16 838
博客第二天纪念日 今天挑战表格第一列相同数据合并单元格，其他列不同数据添加到一行显示 element中有表格合并的方法： 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。详见链接: element表格. 其
vue a-table合并相同内容的行,合并行
收集、分享
12-06 333
vue a-table合并相同内容的行,合并行
Vue中使用Element组件合并相同列表项
我会好好努力的
09-18 4285
首先可以参考element的官方网站http://element-cn.eleme.io/#/zh-CN/component/table 但是这里只是单纯的设置每2行合并一起，并不能自主设置 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { ...
vue 动态合并相同单元格
code12313的博客
09-18 263
【代码】vue 动态合并相同单元格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值