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>