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-optionv-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-optionv-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-optionv-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-optionv-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>