vue页面实现table动态拆分列功能

效果如下

代码如下

<template>
    <div class="table-container">
      <div class="scroll-container">
        <table class="dynamic-table"> 
            <tbody>
              <tr>
                    <td rowspan="2" style="width: 200px;">时间段</td>
                    <td rowspan="2" style="width: 150px;">时间</td>
                    <td colspan="6">FM-1 <el-button size="mini" type="primary" plain @click="inputColspan('FM-1')">拆分列</el-button></td>
                    <td colspan="6">FM-3 <el-button size="mini" type="primary" plain @click="inputColspan('FM-3')">拆分列</el-button></td>
                    <td colspan="6">FM-2 <el-button size="mini" type="primary" plain @click="inputColspan('FM-2')">拆分列</el-button></td>
                    <td colspan="6">FM-4 <el-button size="mini" type="primary" plain @click="inputColspan('FM-4')">拆分列</el-button></td>
                </tr>
                <tr>
                    <td >1xh</td>
                    <td >2xh</td>
                    <td >3xh</td>
                    <td >4xh</td>
                    <td >5xh</td>
                    <td >6xh</td>
                    <td >1xh</td>
                    <td >2xh</td>
                    <td >3xh</td>
                    <td >4xh</td>
                    <td >5xh</td>
                    <td >6xh</td>
                    <td >1xh</td>
                    <td >2xh</td>
                    <td >3xh</td>
                    <td >4xh</td>
                    <td >5xh</td>
                    <td >6xh</td>
                    <td >1xh</td>
                    <td >2xh</td>
                    <td >3xh</td>
                    <td >4xh</td>
                    <td >5xh</td>
                    <td >6xh</td>
                </tr>
                <tr>
                    <td rowspan="4">8:00-10:00</td>
                    <td rowspan="3">2H</td>
                    <td :colspan="col.colspan" v-for="col in columns" :key="col.id">
                      <el-select style="width: 100%;text-align: center;" v-model="col.selectValue1" placeholder="请选择">
                          <el-option
                            v-for="item in options"
                          :key="item"
                          :label="item"
                          :value="item">
                          </el-option>
                      </el-select>
                    </td>

                 
                </tr>
                <tr>
                  <td :colspan="col.colspan" v-for="col in columns" :key="col.id">
                      <el-select style="width: 100%;text-align: center;" v-model="col.selectValue2" placeholder="请选择">
                          <el-option
                            v-for="item in options"
                          :key="item"
                          :label="item"
                          :value="item">
                          </el-option>
                      </el-select>
                    </td>
                
                </tr>
                <tr>

                  <td :colspan="col.colspan" v-for="col in columns" :key="col.id">
                      <el-select style="width: 100%;text-align: center;" v-model="col.selectValue3" placeholder="请选择">
                          <el-option
                            v-for="item in options"
                          :key="item"
                          :label="item"
                          :value="item">
                          </el-option>
                      </el-select>
                    </td>

                
                </tr>
                <tr>
                    <td >数量</td>

                    <td :colspan="col.colspan" v-for="col in columns" :key="col.id">
                      <el-select style="width: 100%;text-align: center;" v-model="col.selectValue4" placeholder="请选择">
                          <el-option
                            v-for="item in options"
                          :key="item"
                          :label="item"
                          :value="item">
                          </el-option>
                      </el-select>
                    </td>

                </tr>
                

                               
            </tbody>

        </table>
     </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        columns: [
          { id: 1, selectValue1: '',selectValue2: '', selectValue3: '', selectValue4: '',colspan:6 ,heatNum:'FM-1'},
          { id: 2, selectValue1: '',selectValue2:  '', selectValue3: '', selectValue4: '',colspan:3,heatNum:'FM-3'},
          { id: 3, selectValue1: '', selectValue2: '', selectValue3: '', selectValue4: '',colspan:3,heatNum:'FM-3' },
          { id: 4, selectValue1: '',selectValue2:  '' , selectValue3: '', selectValue4: '',colspan:6 ,heatNum:'FM-2'},
          { id: 5, selectValue1: '',selectValue2:  '' , selectValue3: '', selectValue4: '',colspan:6,heatNum:'FM-4'}

        
      ],

      options: ['选项1', '选项2','选项3', '选项4','选项5'],
     

      }
    },
    
    methods: {
      inputColspan(heatNum) {
        this.$prompt('请输入合并列数', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        
        }).then(({ value }) => {
          this.addColumn(value,heatNum);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    addColumn(colspan,heatNum) {
     
      var index=0;
      var id=this.columns.length;
      var selectColumn=[];
      for(var i=0;i<this.columns.length;i++){
          if(this.columns[i].heatNum==heatNum){
            index=i;
            selectColumn.push(this.columns[i]);
          }
      }
      var cols=colspan.split(',');
      var sumColspan=0;
      for(var i=0;i<cols.length;i++){
        sumColspan+=parseInt(cols[i]);
      }
      if(sumColspan!=6){
        this.$message({
          message: '拆分列格式错误',
          type: 'warning'
        });
      }else{
        var addCount=cols.length-selectColumn.length;
        console.log(cols);
      for(var j=0;j<selectColumn.length;j++){
        selectColumn[j].colspan=cols[j];
      }
      for(var h=0;h<addCount;h++){
        this.columns.splice(index+h+1,0,{ id: id+h, selectValue1: '', selectValue2: '' , selectValue3: '', selectValue4: '',colspan:cols[selectColumn.length+h] ,heatNum:heatNum})
      }
      
      }
      
    }

    
    }
  }
  </script>
  
  <style scoped>

.scroll-container {
  height: calc(100vh - 70px);
  overflow-y: auto;
  margin-top: 10px;
  border: 1px solid #ddd;
}
  .table-container {
    padding: 20px;
    height: 100%;
  }
  
  .dynamic-table {
  border: 1px solid #000;
  border-collapse: collapse;
  display: inline-block;
}
.dynamic-table td {
  border: 1px solid #000;
  padding: 3px;
  width: 100px;
  text-align: center;
}
/deep/ .el-input__inner {
text-align: center;
}
  
  
  </style>