vue原生table表格实现动态添加列，一行添加完换行继续添加。el-select输入框背景颜色根据所选内容不同而改变
效果如下
动态添加列
代码如下
<template><div class="table-container"><button @click="addColumn">添加列</button><div class="scroll-container"><div class="table-grid"><div v-for="(row, rowIndex) in tableRows" :key="rowIndex" class="table-row"><table class="dynamic-table"><tbody><tr><td :colspan="row.length*6"> </td></tr><tr><td colspan="6" v-for="col in row" :key="col.id">{{col.id}}炉</td></tr><tr><td v-for="n in row.length*6" :key="n">{{ n%6==0?6:n%6 }}</td></tr><tr class="custom-row"><td colspan="6" v-for="col in row" :key="col.id"><el-select style="height: 100px;" v-model="col.select1" placeholder="请选择" :class="className[col.id]" @change="handleChange($event,col.id)"><el-optionv-for="item in options":key="item.value":label="item.value":value="item.value"></el-option></el-select></td></tr><tr><td colspan="6" v-for="col in row" :key="col.id"><el-select v-model="col.select2" placeholder="请选择"><el-optionv-for="item in optionsFm":key="item":label="item":value="item"></el-option></el-select></td></tr></tbody></table></div></div></div></div>
</template><script>
export default {data() {return {columns: [],options: [{ value: 'danger', label: '危险操作', bgColor: 'classRed' },{ value: 'warning', label: '警告操作', bgColor: 'classBlue' }],optionsFm: ['FM-1', 'FM-2', 'FM-3','FM-4'],maxColsPerRow: 23,nextId: 1,currentBgColor: '',className:[],}},computed: {tableRows() {const rows = []for (let i = 0; i < this.columns.length; i += this.maxColsPerRow) {const row = this.columns.slice(i, i + this.maxColsPerRow)// 奇数行反转实现蛇形排列// if (Math.floor(i / this.maxColsPerRow) % 2 === 0) {// row.reverse()// }// rows.push(row)rows.push(this.columns.slice(i, i + this.maxColsPerRow))}return rows.length ? rows : [[]]}},methods: {handleChange(val,id) {const selected = this.options.find(item => item.value === val)this.className[id] = selected ? selected.bgColor : ''},addColumn() {this.columns.push({id: this.nextId++,select1: '',select2: ''})}}
}
</script><style scoped>
.table-container {padding: 20px;height: 100%;
}
.scroll-container {height: calc(100vh - 70px);overflow-y: auto;margin-top: 10px;border: 1px solid #ddd;
}
.table-grid {display: flex;flex-direction: column;gap: 20px;
}
.dynamic-table {border: 1px solid #000;border-collapse: collapse;display: inline-block;
}
.dynamic-table td {border: 1px solid #000;padding: 3px;width: 6px;text-align: center;
}
.dynamic-table select {width: 100%;padding: 5px;
}
.number-cells {display: flex;justify-content: space-around;
}
button {padding: 8px 16px;background: #42b983;color: white;border: none;border-radius: 4px;cursor: pointer;
}
button:hover {background: #3aa876;
}
/deep/.custom-row .el-input__inner{height: 100px;
}/deep/.classRed .el-input__inner{background-color: #FEA0F7;}
/deep/.classBlue .el-input__inner{background-color: #00FFFF;}</style>