問題描述
這個是需求:動態表格、表格里邊下拉框,彈框選擇
基礎的列表,還行,這種真的是一時不知如何是好。打算晚上吃了飯找前端同事,幫忙看看。晚飯前,AI一下看看。結果,驚為天人!!
問題解決
提問:
生成代碼:
<template><div class="exam-scoring-page"><h3>試卷評分</h3><div class="form-group"><el-radio-group v-model="vehicleSpecResult"><el-radio label="正確">車型參配:正確</el-radio><el-radio label="錯誤">車型參配:錯誤</el-radio></el-radio-group><el-radio-group v-model="detectionResult"><el-radio label="正確">檢測結果:正確</el-radio><el-radio label="錯誤">檢測結果:錯誤</el-radio></el-radio-group><el-radio-group v-model="paintFilmResult"><el-radio label="合格">漆膜打點:合格</el-radio><el-radio label="不合格">漆膜打點:不合格</el-radio></el-radio-group></div><div class="form-group"><label>問題標記:</label><el-table:data="problemList"borderstyle="width: 800px; margin-left: 60px"><el-table-column prop="part" label="部件"><template slot-scope="scope"><el-select v-model="scope.row.part" placeholder="請選擇部件"><el-option label="左A柱內側" value="左A柱內側"></el-option><el-option label="右側下邊梁" value="右側下邊梁"></el-option><!-- 可根據實際需求添加更多選項 --></el-select></template></el-table-column><el-table-column prop="recordProblem" label="備案問題"><template slot-scope="scope"><el-radio-group v-model="scope.row.recordProblem"><el-radio label="未備案">未備案</el-radio><el-radio label="備案錯誤">備案錯誤</el-radio></el-radio-group></template></el-table-column><el-table-column prop="inspectorSelection" label="檢測師點選"><template slot-scope="scope"><el-input v-model="scope.row.inspectorSelection" placeholder="請輸入"></el-input></template></el-table-column><el-table-column prop="selectionProblem" label="點選存在問題"><template slot-scope="scope"><el-input v-model="scope.row.selectionProblem" placeholder="請輸入"></el-input></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="text" @click="addRow">添加</el-button><el-button type="text" @click="deleteRow(scope.$index)" v-if="problemList.length > 1">刪除</el-button></template></el-table-column></el-table></div><div class="form-group"><label>試卷批改備注:</label><el-inputtype="textarea"v-model="remark":rows="5"style="width: 800px; margin-left: 60px"placeholder="請輸入備注"></el-input></div><el-button type="primary" @click="save" style="margin-left: 450px; margin-top: 20px">保存</el-button></div>
</template><script>
export default {data() {return {vehicleSpecResult: "", // 車型參配結果detectionResult: "", // 檢測結果paintFilmResult: "", // 漆膜打點結果problemList: [{part: "左A柱內側",recordProblem: "備案錯誤",inspectorSelection: "未見異常(未見異常)",selectionProblem: "變形(變形),老化(老化)",},{part: "右側下邊梁",recordProblem: "未備案",inspectorSelection: "未見異常(未見異常)",selectionProblem: "",},{part: "",recordProblem: "未備案",inspectorSelection: "未見異常(未見異常)",selectionProblem: "變形(變形),老化(老化)",},], // 問題標記列表remark: "", // 試卷批改備注};},methods: {addRow() {this.problemList.push({part: "",recordProblem: "未備案",inspectorSelection: "未見異常(未見異常)",selectionProblem: "",});},deleteRow(index) {this.problemList.splice(index, 1);},save() {// 保存邏輯,可根據實際需求將數據提交到后端console.log("保存數據:", {vehicleSpecResult: this.vehicleSpecResult,detectionResult: this.detectionResult,paintFilmResult: this.paintFilmResult,problemList: this.problemList,remark: this.remark,});this.$message.success("保存成功");},},
};
</script><style scoped>
.exam-scoring-page {padding: 20px;
}
.form-group {margin-bottom: 20px;
}
.form-group label {display: inline-block;width: 60px;
}
.el-radio {margin-right: 20px;
}
</style>
copy過來代碼,我試試效果:
我去,太完美了,效果完全實現。這是一個什么時代,太可怕,太喜人。
問題總結
心路歷程:不知所措、試一下、驚為天人、可怕、喜人。
任何一個領域,但凡學習點基礎知識,然后借助這種模型的能力。真的似乎,可以無所不能。講真