下一个请求修改代码在获取到服务器数据后根据data的对象数量自动生成相应的表格表格的样式从first-cell开始一直到add-button。 代码： template div div class=table-container table class=fixed-table tr v-for=row rowIndex in tableData key=rowIndex

修改后的代码如下所示：

<template>
  <div>
    <div class="table-container">
      <table class="fixed-table">
        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex" :colspan="getColspan(cell)"
            :class="['cell', { 'first-cell': rowIndex === 0 && cellIndex === 0, 'center-text': cell !== 1 && cell !== 16 }]">
            <!-- 添加内容slot -->
            <template v-if="isTextCell(cell) && cell === 16">
              <!-- 在第16单元格内的上方添加文本“其它” -->
              <div class="other-text">其它</div>
              <textarea class="textarea-cell" v-model="textData[cell]" disabled rows="5"></textarea>
            </template>
            <template v-else-if="isTextCell(cell)">
              <input :value="getTextData(cell)" :class="{'center-text': cell !== 1 && cell !== 16 }" disabled>
            </template>
            <template v-else-if="isImageCell(cell)">
              <div class="image-cell">
                <img :src="getImageUrl(cell)" alt="Image" />
              </div>
            </template>
          </td>
        </tr>
        <tr>
          <td :colspan="tableData[0].length">
            <div class="center-align">
              <div class="add-button" @click="handleAddButtonClick">+</div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="add-button-container">
      <button class="edit-btn" @click="gotoTaocan" v-show="userInfo[0].position === 1">编辑</button>
      <button class="home-btn" @click="gotoHome">主页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      showBackButton: false,
      tableData: [],
      textData: {},
      buttonColspan: 0,
    };
  },
  async created() {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    const getDataList = uniCloud.importObject("combo");
    let res = await getDataList.getList(); // 从服务器获取数据
    console.log("收到服务器数据：" + JSON.stringify(res));
    if (res.data) {
      const item = res.data[0];
      const mainDishNameList = item.maindishname;
      const mainDishPicList = item.maindishpic;
      const otherdishes = item.otherdishes;

      mainDishPicList.forEach(async (picURL, index) => {
        if (picURL) {
          const imageURL = await this.downloadImage(picURL);
          this.$set(this.textData, 4 + index, imageURL);
        } else {
          this.$set(this.textData, 4 + index, null);
        }
      });

      this.textData[1] = item.price + " " + item.name;
      this.textData[7] = mainDishNameList[0];
      this.textData[8] = mainDishNameList[1];
      this.textData[9] = mainDishNameList[2];
      this.textData[13] = mainDishNameList[3];
      this.textData[14] = mainDishNameList[4];
      this.textData[15] = mainDishNameList[5];
      this.textData[16] = otherdishes;

      this.generateTableData(); // 生成表格数据
    }
  },
  methods: {
    getColspan(cell) {
      if (cell === 1 || cell === 16) {
        return this.tableData[0].length;
      } else {
        return 1;
      }
    },
    isTextCell(cell) {
      const textCells = [1, 7, 8, 9, 13, 14, 15, 16];
      return textCells.includes(cell);
    },
    isImageCell(cell) {
      const imageCells = [4, 5, 6, 10, 11, 12];
      return imageCells.includes(cell);
    },
    getTextData(cell) {
      return this.textData[cell];
    },
    updateTextData(cell, value) {
      this.textData[cell] = value;
    },
    // 请求服务器获取图片地址的逻辑
    // 返回从服务器接收到的图片地址
    getImageUrl(cell) {
      const mainDishPicList = JSON.parse(localStorage.getItem("tableData"))[0].mainDishPicList;
      return mainDishPicList[cell - 4]; // 因为图片地址在mainDishPicList中的索引是cell-4
    },
    handleAddButtonClick() {},
    gotoTaocan() {
      uni.redirectTo({
        url: "/pages/index/taocan",
      });
    },
    gotoHome() {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
    generateTableData() {
      const tableData = [];

      for (let i = 0; i < this.textData[16].length; i++) {
        const newRow = [];

        for (let j = 0; j < this.tableData[0].length; j++) {
          newRow.push(i + j + 1);
        }

        tableData.push(newRow);
      }

      this.tableData = tableData;
    },
  },
};
</script>

修改后的代码会根据 textData 中 16 单元格的对象数量动态生成相应数量的表格。表格的样式从 first-cell 开始一直到 add-button。生成表格的逻辑被封装在 generateTableData 方法中，在 created 钩子函数中调用该方法