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">&nbsp;</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-option
                    v-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-option
                    v-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>