Vue.js动态生成表格：根据服务器数据自动创建表格 - 优化后的代码
<p>{"template":"\n <div>\n <div class="table-container">\n <table class="fixed-table">\n <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">\n <td v-for="(cell, cellIndex) in row" :key="cellIndex" :colspan="getColspan(cell)"\n :class="['cell', { 'first-cell': rowIndex === 0 && cellIndex === 0, 'center-text': cell !== 1 && cell !== 16 }]">\n <!-- 添加内容slot -->\n <template v-if="isTextCell(cell) && cell === 16">\n <!-- 在第16单元格内的上方添加文本“其它” -->\n <div class="other-text">其它</div>\n <textarea class="textarea-cell" v-model="textData[cell]" disabled rows="5"></textarea>\n </template>\n <template v-else-if="isTextCell(cell)">\n <input :value="getTextData(cell)" :class="{'center-text': cell !== 1 && cell !== 16 }" disabled>\n </template>\n <template v-else-if="isImageCell(cell)">\n <div class="image-cell">\n <img :src="getImageUrl(cell)" alt="Image" />\n </div>\n </template>\n </td>\n </tr>\n <tr>\n <td :colspan="tableData[0].length">\n <div class="center-align">\n <div class="add-button" @click="handleAddButtonClick">+</div>\n </div>\n </td>\n </tr>\n </table>\n </div>\n <div class="add-button-container">\n <button class="edit-btn" @click="gotoTaocan" v-show="userInfo[0].position === 1">编辑</button>\n <button class="home-btn" @click="gotoHome">主页</button>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n userInfo: JSON.parse(localStorage.getItem("userInfo")),\n showBackButton: false,\n tableData: [],\n textData: {},\n buttonColspan: 0,\n };\n },\n async created() {\n const userInfo = JSON.parse(localStorage.getItem("userInfo"));\n const getDataList = uniCloud.importObject("combo");\n let res = await getDataList.getList(); // 从服务器获取数据\n console.log("收到服务器数据：" + JSON.stringify(res));\n if (res.data) {\n const item = res.data[0];\n const mainDishNameList = item.maindishname;\n const mainDishPicList = item.maindishpic;\n const otherdishes = item.otherdishes;\n\n mainDishPicList.forEach(async (picURL, index) => {\n if (picURL) {\n const imageURL = await this.downloadImage(picURL);\n this.$set(this.textData, 4 + index, imageURL);\n } else {\n this.$set(this.textData, 4 + index, null);\n }\n });\n\n this.textData[1] = item.price + " " + item.name;\n this.textData[7] = mainDishNameList[0];\n this.textData[8] = mainDishNameList[1];\n this.textData[9] = mainDishNameList[2];\n this.textData[13] = mainDishNameList[3];\n this.textData[14] = mainDishNameList[4];\n this.textData[15] = mainDishNameList[5];\n this.textData[16] = otherdishes;\n\n this.generateTableData(); // 生成表格数据\n }\n },\n methods: {\n getColspan(cell) {\n if (cell === 1 || cell === 16) {\n return this.tableData[0].length;\n } else {\n return 1;\n }\n },\n isTextCell(cell) {\n const textCells = [1, 7, 8, 9, 13, 14, 15, 16];\n return textCells.includes(cell);\n },\n isImageCell(cell) {\n const imageCells = [4, 5, 6, 10, 11, 12];\n return imageCells.includes(cell);\n },\n getTextData(cell) {\n return this.textData[cell];\n },\n updateTextData(cell, value) {\n this.textData[cell] = value;\n },\n // 请求服务器获取图片地址的逻辑\n // 返回从服务器接收到的图片地址\n getImageUrl(cell) {\n const mainDishPicList = JSON.parse(localStorage.getItem("tableData"))[0].mainDishPicList;\n return mainDishPicList[cell - 4]; // 因为图片地址在mainDishPicList中的索引是cell-4\n },\n handleAddButtonClick() {},\n gotoTaocan() {\n uni.redirectTo({\n url: "/pages/index/taocan",\n });\n },\n gotoHome() {\n uni.redirectTo({\n url: "/pages/index/index",\n });\n },\n generateTableData() {\n const tableData = [];\n\n for (let i = 0; i < this.textData[16].length; i++) {\n const newRow = [];\n\n for (let j = 0; j < this.tableData[0].length; j++) {\n newRow.push(i + j + 1);\n }\n\n tableData.push(newRow);\n }\n\n this.tableData = tableData;\n },\n },\n};\n</script>\n</p>
原文地址: https://www.cveoy.top/t/topic/pyq6 著作权归作者所有。请勿转载和采集!