vue element自定义合并行列

table是一格一格渲染数据的，element组件提供一个属性方法span-method，可以打断点试一下，看效果图吧

上代码，自己捡捡吧

<template>
  <div>
    <el-row>
      <el-col :span="17">
        <!--方案-->
        <div class="case-box">
          <div class="btns-content" v-for="(v,i) in classCountCaseData" :key="i">
            <el-button
              :class="{btnsItem:v.focus}"
              type="primary"
              plain
              @click="tagClick(v)">
              <span>{{v.name}}</span>
              <i class="el-icon-close closeicon" @click="handleClose(v)"></i>
            </el-button>
          </div>
          <el-button class="button-new-tag" size="small" @click="addBtn" icon="el-icon-plus"></el-button>
        </div>
        <!--新增、form表单,dialog弹框-->
        <el-dialog :close-on-click-modal="false" :before-close="xclose" :append-to-body="true" :visible.sync="formVisible">
          <div class="room-add">
            <div class="room-add-title">课节方案设置</div>
            <div class="room-add-content">
              <el-form ref="caseForm" :model="caseForm" :rules="caseFormRule" label-width="120px">
                <el-form-item label="课节方案名称" prop="name">
                  <el-input v-model="caseForm.name" placeholder="请输入课节方案名称"></el-input>
                </el-form-item>
                <el-form-item label="每周上课天数" prop="weekDays">
                  <el-select v-model="caseForm.weekDays" class="selectWidth" placeholder="">
                    <el-option v-for="(v,i) in week" :key="i" :label="v" :value="v"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上午节数" prop="swCounts">
                  <el-select v-model="caseForm.swCounts" class="selectWidth" placeholder="">
                    <el-option v-for="(v,i) in mor" :key="i" :label="v" :value="v"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="下午节数" prop="xwCounts">
                  <el-select v-model="caseForm.xwCounts" class="selectWidth" placeholder="">
                    <el-option v-for="(v,i) in noon" :key="i" :label="v" :value="v"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="晚上节数" prop="wsCounts">
                  <el-select v-model="caseForm.wsCounts" class="selectWidth" placeholder="">
                    <el-option v-for="(v,i) in wsCounts" :key="i" :label="v" :value="v"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <div class="clearfix">
                    <div class="right">
                      <el-button @click="classCountbackBtn">取消</el-button>
                      <el-button type="primary" @click="onSubmit('caseForm')">保存</el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-dialog>
        <!--课节数量-->
        <div class="classCount-box">
          <div class="tixing">
            <div class="tixing-title">课节设置</div>
          </div>
          <div v-if="caseForm.weekDays">
            <el-row>
              <el-col :span="6">
                <span class="classCount-font">每周上课天数：{{caseForm.weekDays}}天</span>
              </el-col>
              <el-col :span="6">
                <span class="classCount-font">上午节数:{{caseForm.swCounts}}节</span>
              </el-col>
              <el-col :span="6">
                <span class="classCount-font">下午节数：{{caseForm.xwCounts}}节</span>
              </el-col>
              <el-col :span="6">
                <span class="classCount-font">晚上节数：{{caseForm.wsCounts}}节</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--表格生成-->
        <div class="classCount-box">
          <div class="tixing">
            <div class="tixing-title">时间设置</div>
          </div>
          <!--表格-->
          <div class="table-box" v-if="tableData.length!==0">
            <el-table
              :data="tableData"
              style="width: 100%"
              :span-method="objectSpanMethod">
              <el-table-column
                align="center"
                width="60"
                prop="label">
              </el-table-column>
              <el-table-column
                align="center"
                prop="count"
                label="节次"
                width="60">
              </el-table-column>
              <el-table-column
                align="center"
                label="开始时间"
                width="180">
                <template slot-scope="scope">
                  <el-time-select
                    class="time-width"
                    size="mini"
                    @change="startChange(scope)"
                    @focus="startFocus(scope)"
                    :clearable="false"
                    placeholder="开始时间"
                    v-model="scope.row.startTime"
                    :picker-options="{
                      start: '06:00',
                      step: '00:05',
                      end: '22:00',
                      minTime:startMinTime,
                      maxTime:scope.row.endTime
                    }">
                  </el-time-select>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="结束时间"
                width="180">
                <template slot-scope="scope">
                  <el-time-select
                    class="time-width"
                    size="mini"
                    @change="endChange(scope)"
                    @focus="endFocus(scope)"
                    :clearable="false"
                    placeholder="结束时间"
                    v-model="scope.row.endTime"
                    :picker-options="{
                      start: '06:00',
                      step: '00:05',
                      end: '22:00',
                      minTime:scope.row.startTime,
                      maxTime:endMaxTime
                    }">
                  </el-time-select>
                </template>
              </el-table-column>
            </el-table>
            <div class="edit-box clearfix">
              <div class="right">
                <el-button  @click="backBtn">取消</el-button>
                <el-button  type="primary" @click="saveBtn">保存</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="classCount-box grade-box">
          <div class="zhbp-timeTable iconfont grade-title">适配年级</div>
          <div v-for="(v,i) in gradeCaseData" :key="i" class="grade-item">
            <el-row type="flex" align="middle" justify="center">
              <el-col :span="7">
                <span class="grade-name">{{v.gradeName}}</span>
              </el-col>
              <el-col :span="10">
                <el-select @change="chooseCase(v)" v-if="v.caseSelectShow" v-model="v.lessonGroupId" size="mini">
                  <el-option
                    v-for="(val,ind) in classCountCaseData"
                    :key="ind"
                    :value="val.id"
                    :label="val.name"
                  ></el-option>
                </el-select>
                <span v-else class="classCase">{{v.lessonGroupName}}</span>
              </el-col>
              <el-col :span="7">
                <el-button type="text" @click="resetCase(v)">重置</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {requestServices} from '../../api/api';
  import {reg} from '../../lib/reg'
  export default {
    data() {
      return {
          groupId:'',
        formVisible:false,
        //课节设置options
        week:[5,6,7],
        mor:[0,1,2,3,4,5],
        noon:[0,1,2,3,4,5],
        wsCounts:[0,1,2,3],

        startMinTime:'',//开始时间的最小时间
        endMaxTime:'',//结束时间的最大时间
        //上下晚的数据,margin高度,显示与否
        tableData:[],

        classCountCaseData: [],//全部课节方案
        inputValue: '',

        caseForm:{
          name:'',
          weekDays:'',
          swCounts:'',
          xwCounts:'',
          wsCounts:'',
        },
        caseFormRule:{
            name:[
              { required: true, message: '请输入课节方案名称', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ],
          weekDays:reg.select(),
          swCounts:reg.select(),
          xwCounts:reg.select(),
          wsCounts:reg.select(),
        },

        gradeCaseData:[],//适配年级方案数据
      };
    },
    mounted(){
      this.classCountLoad();
      this.getGradeCaseList();
      this.getLessonGroupAll();
    },
    methods: {
      classCountLoad(){
        //全部课节方案

      },
      //获取全部方案
      getLessonGroupAll(id){
        let self = this;
        requestServices.lessonGroupAll({id:id})
          .then((res)=>{
            this.classCountCaseData=res.resultData
            if(id){
              let val = {id:id}
              self.tagClick(val)
            }
          })
      },
      //获取适配年级方案数据
      getGradeCaseList(){
        requestServices.gradeCaseList()
          .then((res)=>{
            this.gradeCaseData=res.resultData;
          })
      },
      //弹框关闭前，done用于执行关闭
      xclose(done){
        //清除校验结果
        this.$refs.caseForm.clearValidate();
        done();
      },
      //方案课节设置取消
      classCountbackBtn(){
        this.$refs.caseForm.clearValidate();
        this.formVisible=false;
        this.getLessonGroupAll();
        this.caseForm = {
          name:'',
            weekDays:'',
            swCounts:'',
            xwCounts:'',
            wsCounts:'',
        };
        this.tableData=[];
      },
      //合并行
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          let self = this,swCounts=self.caseForm.swCounts,
            xwCounts=self.caseForm.xwCounts,wsCounts=self.caseForm.wsCounts;
        if (columnIndex === 0) {
           if(!swCounts&&!xwCounts&&wsCounts){
             if(row.count===1){
               return {
                 rowspan: wsCounts,
                 colspan: 1
               };
             }else{
               return {
                 rowspan: 0,
                 colspan: 0
               };
             }
           }else if(!swCounts&&xwCounts&&wsCounts){
             if (row.count===1) {
               return {
                 rowspan: xwCounts,
                 colspan: 1
               };
             }else if(row.count===(1+xwCounts)){
               return {
                 rowspan: wsCounts,
                 colspan: 1
               };
             }else{
                 return{
                     rowspan:0,
                   colspan:0,
                 };
             }
           }else if(!swCounts&&xwCounts&&!wsCounts){
             if (row.count===1) {
               return {
                 rowspan: xwCounts,
                 colspan: 1
               };
             }else{
               return{
                 rowspan:0,
                 colspan:0,
               };
             }
           }else{
             if (row.count===1) {
               return {
                 rowspan: swCounts,
                 colspan: 1
               };
             } else if(row.count===(1+swCounts)) {
               return {
                 rowspan: xwCounts,
                 colspan: 1
               };
             }else if(row.count===(1+swCounts+xwCounts)){
               return{
                 rowspan: wsCounts,
                 colspan: 1
               }
             }else{
               return {
                 rowspan: 0,
                 colspan: 0
               };
             }
           }
        }
      },
      //开始时间选择
      startChange(scope){
        let self = this;
        //判定之前的每行时间值是否填写完整
        for(let i=0; i<scope.$index; i++){
          if(!this.tableData[i].startTime||!this.tableData[i].endTime){
            self.$message.error('需先填写之前的时间，才能进行下一步操作');
            scope.row.startTime='';
            return
          }
        }
      },
      startFocus(scope){
        let self = this;
        if(scope.$index){
          let prevEndTime =self.tableData[scope.$index-1]['endTime'];
          self.startMinTime=prevEndTime;
        }else{
        this.startMinTime='';
        }
      },
      //结束时间选择
      endChange(scope){
        let self = this;
        //先判定当前行的开始时间是否有选择,再去判定之前的每行时间值是否填写完整
        if(scope.row.startTime){
          for(let i=0; i<scope.$index; i++){
            if(!this.tableData[i].startTime||!this.tableData[i].endTime){
              self.$message.error('需先填写之前的时间，才能进行下一步操作');
              scope.row.endTime='';
              return
            }
          }
          //如果校验通过，让下个开始时间的最小时间等于本结束时间
          self.startMinTime=scope.row.endTime;
        }else{
          scope.row.endTime='';
          self.$message.error('需先填写开始时间，才能进行下一步操作');
        }
      },
      endFocus(scope){
        let self = this;
        if((scope.$index+1)!==this.tableData.length){
          let nextStartTime=self.tableData[scope.$index+1]['startTime']
          if(nextStartTime){
            self.endMaxTime=nextStartTime;
          }
        }else{
          self.endMaxTime='22:00'
        }
      },
      //课节设置提交
      onSubmit(caseForm){
        let self = this;
        this.$refs[caseForm].validate((valid) => {
          if (valid) {
              //课节数方案保存
            requestServices.lessonGroupSave(self.caseForm)
              .then((res)=>{
                self.getLessonGroupAll(res.resultData.id);
                self.groupId=res.resultData.id;
                self.formVisible=false;
              })
          }
        })

      },
      //方案按钮
      tagClick(val){
        this.groupId=val.id;
        let self = this;
        if(val.focus!==undefined){
          this.classCountCaseData.forEach(item=>{
            item.focus=false;
          });
          val.focus=true;
        }
        requestServices.lessonGroupGet({id:val.id})
          .then(res=>{
            self.caseForm.name=res.resultData.name;
            self.caseForm.weekDays=res.resultData.weekDays;
            self.caseForm.swCounts=res.resultData.swCounts;
            self.caseForm.xwCounts=res.resultData.xwCounts;
            self.caseForm.wsCounts=res.resultData.wsCounts;
            if(res.resultData.lessonTimes.length){
                self.tableData = res.resultData.lessonTimes
            }else{
              let  swCountsNum=self.caseForm.swCounts,
                xwCountsNum=self.caseForm.xwCounts,
                wsCountsNum=self.caseForm.wsCounts;
              self.tableData=[];

              if(swCountsNum||xwCountsNum||wsCountsNum){
                let _count= 1;
                if(swCountsNum===''){
                  swCountsNum=0
                }else{
                  for(let i=0;i<swCountsNum;i++){
                    self.tableData.push({count:_count,label:'上午',startTime:'',endTime:''},)
                    _count++;
                  }
                }
                if(xwCountsNum==='') {
                  xwCountsNum=0;
                }else{
                  for(let i=0;i<xwCountsNum;i++){
                    self.tableData.push({count:_count,label:'下午',startTime:'',endTime:''},)
                    _count++;
                  }
                }
                if(wsCountsNum===''){
                  wsCountsNum=0;
                }else{
                  for(let i=0;i<wsCountsNum;i++){
                    self.tableData.push({count:_count,label:'晚上',startTime:'',endTime:''},)
                    _count++;
                  }
                }
              }
            }
          })
        //获取课表信息
//        requestServices.lessonTimeList(val.id)
//          .then((res)=>{
//          debugger
//          })
      },
      //删除方案
      handleClose(val) {
        let  self = this;
        requestServices.lessonGroupDelete({id:val.id})
          .then(res=>{
            self.getLessonGroupAll();
            self.caseForm = {
              name:'',
              weekDays:'',
              swCounts:'',
              xwCounts:'',
              wsCounts:'',
            };
            self.tableData=[];
          })
      },
      //方案新增
      addBtn() {
        this.formVisible=true;
        this.caseForm={
            name:'',
            weekDays:'',
            swCounts:'',
            xwCounts:'',
            wsCounts:'',
        };
      },
      backBtn(){
        this.formVisible=false;
        this.getLessonGroupAll(this.groupId);
      },
      saveBtn(){
          let _data = {
              groupId:this.groupId,
              timeData:this.tableData
          };
          let self = this;
        requestServices.lessonTimeSaveAll({lessonTime:JSON.stringify(_data)})
          .then(res=>{
            self.getLessonGroupAll(self.groupId);
          })
      },

      //重置
      resetCase(val){
        val.caseSelectShow=true;
      },
      //选择方案
      chooseCase(v){
        let self = this;
        v.caseSelectShow=false;
        requestServices.classCountCaseGrade({id:v.gradeId,lessonGroupId:v.lessonGroupId})
          .then((res)=>{
            v.caseSelectShow=false;
            self.getGradeCaseList();
          })
      }
    }
  }
</script>
<style>
  .case-box{
    margin: 20px;
  }
  .btns-content{
    display: inline-block;
    margin:0 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .classCount-box{
    min-width: 694px;
    margin: 30px;
    border: .5px solid #8097b5;
    padding:0 0 40px 20px;
  }
  .classCount-font{
    font-size: 14px;
    color: #656464;
  }
  .tixing{
    border-top: 30px solid #8097b5;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    width: 66px;
    color: white;
  }
  .tixing-title{
    position: relative;
    top: -26px;
    text-align: center;
  }
  .closeicon{
    position: relative;
    top: -9px;
    right: -15px;
    border-radius: 50%;
  }
  .closeicon:hover{
    background: white;
    color: #1a3d6d;
  }
  .grade-title{
    letter-spacing: 5px;
    background: #8097b5;
    height:40px;
    line-height: 40px;
    color: white;
  }
  .grade-box{
    margin: 90px 20px 20px 20px;
    min-width: 265px;
    padding: 0 0 20px 0;
    text-align: center;
  }
  .grade-item{
    margin: 20px;
  }
  .grade-name{
    font-size: 15px;
    color: #656464;
  }
  .classCase{
    font-size: 15px;
    font-weight: 600;
    color: #ff6e01;
  }
  .time-width{
    font-size: 15px;
    width: 125px !important;
  }
  .time-width input{
    border:none;
  }
  .table-box{
    width: 481px;
    margin: auto;
  }
  .edit-box{
    padding: 10px;
  }
  .btnsItem{
    background-color:#409eff!important;
    color: white!important;
  }
</style>