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

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量395 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hellotutu/article/details/130594080
版权

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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Elenent实现表格相同数据列合并
01-22
本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下 作者：秋名 思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同一个表格，但是每一行，固定一列的数据都相同，即可使用合并单元格，做到了既美观，也清晰。） template： <el span-method=objectSpanMethod4> Js: data(){ return{ orderdata:null,// 后端将数据查询出来后，绑定到orderdata里
Vue实现数据表格合并列rowspan效果
10-16
主要为大家详细介绍了Vue实现数据表格合并列rowspan效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
40-Vue之实现表格首列相同数据合并
小白的博客
04-18 510
Vue之实现表格首列相同数据合并
vue 实现复制内容到粘贴板clipboard的方法
01-19
1 . npm安装到项目目录文件中 npm install clipboard --save 2 . import 引入文件 import Clipboard from 'clipboard'; 3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容 <button class=copyBtn :data-clipboard-text = https://www.baidu.com/ type=text>复制地址</button> 4 . 在JavaScript中通过类名找到元素中的内容。 let clipboard = new
vue单元格多列合并的实现
01-21
一.多列合并 1.在el-table中添加:span-method=objectSpanMethod属性来控制合并单元格，如下图 2.合并代码，每一列都要设置一个不同的key，这样可以防止合并的时候上下内容一样导致错误的问题 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (this.myObj[row.channel_type].start === rowIndex) { return { rowspan: this.
vue-table实现相同项合并,跨行跨列计算
weixin_45408578的博客
09-12 835
【代码】vue-table实现相同项合并,跨行跨列计算。
vue2+element-ui table表格实现相同列参数合并
Xiaochen1239的博客
11-13 319
2.根据table自带的方法实现合并单元格这个是使用在table上的。同一id下的进行合并，上面是根据统一合同编号进行合并。3.根据渲染在页面上的table进行列或者行的合并。1.根据后端返回的参数进行table的展示。
Antd-Vue中Table组件实现相同内容列合并
returndbf的博客
02-02 620
方法适用于Antd以及Antd-Vue，可能同样适用于ElementUi
ant-design-vue合并单元格
m0_53533948的博客
10-23 801
利用ant-design-vue合并值相同的单元格
Ant Design Vue实现a-table表格单元格合并（列/行合并）
Honey Huang的博客
12-09 1715
Ant Design Vue实现a-table表格单元格合并（列/行合并）。a-table 表格行合并（相同项），列合并同理。Ant Design Vue文档有说明，当单元格rowSpan或者colSpan为0时不显示，可以通过getRowspan方法获取到每一条数据对应的rowSpan或者colSpan，设置给rowSpanArr数组。
vue实现将一个数组内的相同数据进行合并
10-16
今天小编就为大家分享一篇vue实现将一个数组内的相同数据进行合并，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
06-08
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
Vue动态多级表头、相同内容列合并
weixin_45275107的博客
10-25 2372
表头数据我是在后端做好之后传到前端的，对应这个格式，可以实现增加或减少。该函数可以返回一个包含两个元素的数组，第一个元素代表。方法可以实现合并行或列，方法的参数是一个对象，里面包含。过滤数据：（判断第一列内容是否相同 返回数组 由。element ui 官网提供了合并的方法。也可以返回一个键名为。(跨几行)，第二个元素代表。
vue3 element-plus el-table:列表中相同名称的数据实现行合并
唐唐唐行的博客
01-18 3911
element-plus el-table:列表中相同名称的数据实现行合并
(vue)el-table 怎么把表格列中相同的数据 合并为一行
nyf_unknow的博客
08-22 1074
【代码】(vue)el-table 怎么把表格列中相同的数据 合并为一行。
el-table 怎么合并相同单元格
颜良文丑的博客
02-03 4683
项目需求table表格中，相同的类型合并成一个单元格展示。
el-table动态合并每一列数据相同且连续的列
m0_72270036的博客
11-03 369
【代码】el-table动态合并每一列数据相同且连续的列。
vue中el-table同列相同数据合并
weixin_44220858的博客
08-02 821
el-table中相同数据内容的数据列合并单元格。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 672
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue动态合并elementui单元格
04-29
要动态合并Element UI表格的单元格，可以使用表格的`span-method`属性。该属性接受一个方法作为参数，用于计算表格中每个单元格应该跨越多少行或列。 下面是一个示例代码，演示了如何动态合并表格中的单元格： ```html <template> <el-table :data="tableData" :span-method="handleSpanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京' }, { name: '李四', age: 20, address: '上海' }, { name: '王五', age: 22, address: '广州' }, { name: '赵六', age: 24, address: '深圳' } ] } }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 如果是第一列，则判断该单元格是否和上一行的单元格内容相同 if (rowIndex > 0 && row.name === this.tableData[rowIndex - 1].name) { // 如果相同，则返回一个对象，设置rowspan属性为0，表示该单元格不需要显示 return { rowspan: 0, colspan: 1 } } else { // 如果不同，则返回一个对象，设置rowspan属性为该单元格所在行相同内容单元格的数量 let count = 1 for (let i = rowIndex + 1; i < this.tableData.length; i++) { if (row.name === this.tableData[i].name) { count++ } else { break } } return { rowspan: count, colspan: 1 } } } else { // 如果不是第一列，则返回一个对象，设置colspan属性为0，表示该单元格不需要显示 return { rowspan: 0, colspan: 0 } } } } } </script> ``` 在上述代码中，我们定义了一个`handleSpanMethod`方法，用于计算表格中每个单元格应该跨越多少行或列。该方法接受一个参数，包含以下属性： - `row`：当前单元格所在行的数据对象 - `column`：当前单元格所在列的配置对象 - `rowIndex`：当前单元格所在行的索引 - `columnIndex`：当前单元格所在列的索引 在`handleSpanMethod`方法中，我们首先判断当前单元格是否为第一列，如果是第一列则需要动态合并单元格。我们使用条件语句判断该单元格是否和上一行的单元格内容相同，如果相同则返回一个对象，设置`rowspan`属性为0，表示该单元格不需要显示；如果不同则返回一个对象，设置`rowspan`属性为该单元格所在行相同内容单元格的数量。如果当前单元格不是第一列，则返回一个对象，设置`colspan`属性为0，表示该单元格不需要显示。 最后，在表格中使用`span-method`属性，绑定`handleSpanMethod`方法即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值