Vue實踐篇-02,AI生成代碼

問題描述

這個是需求:動態表格、表格里邊下拉框,彈框選擇

基礎的列表,還行,這種真的是一時不知如何是好。打算晚上吃了飯找前端同事,幫忙看看。晚飯前,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過來代碼,我試試效果:

我去,太完美了,效果完全實現。這是一個什么時代,太可怕,太喜人。

問題總結

心路歷程:不知所措、試一下、驚為天人、可怕、喜人。

任何一個領域,但凡學習點基礎知識,然后借助這種模型的能力。真的似乎,可以無所不能。講真

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/97791.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/97791.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/97791.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

2025-08-28-zabbix5.0創建監控項通過腳本簡單實現監控oracle11g的磁盤組和表空間的使用量

title: zabbix5.0創建監控項通過腳本簡單實現監控oracle11g的磁盤組和表空間的使用量 authors: Loong date: 2025-08-28使用SQLPLUS配合crontab任務 用來執行sql獲取信息的腳本 /home/oracle/zabbix_oracle_check.sh #!/bin/bash #用于zabbix agent被動模式的 非入侵性的檢測 #…

MySQL-Redo Log(重做日志)

MySQL 的 Redo Log&#xff08;重做日志&#xff09;是 InnoDB 存儲引擎的核心組件之一&#xff0c;是保證數據庫持久性&#xff08;Durability&#xff09; 和崩潰恢復&#xff08;Crash Recovery&#xff09; 的關鍵機制。1. 什么是 Redo Log&#xff1f;它的核心作用是什么&…

嵌入式linux相機(2)

本人從0開始學習linux&#xff0c;使用的是韋東山的教程&#xff0c;在跟著課程學習的情況下的所遇到的問題的總結,理論雖枯燥但是是基礎。本人將前幾章的內容大致學完之后&#xff0c;考慮到后續驅動方面得更多的開始實操&#xff0c;后續的內容將以韋東山教程Linux項目的內容…

云計算學習100天-第34天 -zabbix監控2

SourceURL:file:///home/student/Documents/zabbix.doczabbix服務器配置1. 拷貝zabbix軟件包到pubserver#在此之前先從真機拷貝安裝包[rootserver1 ~]# scp /linux-soft/s2/zzg/zabbix_soft/*.rpm 192.168.88.5:/root/#然后拷貝到pubserver[rootzabbixserver ~]# scp /linux-so…

貓頭虎AI分享:無需OCR,基于ColQwen2、Qwen2.5和Weaviate對PDF進行多模態RAG的解決方案

無需OCR&#xff0c;基于ColQwen2、Qwen2.5和Weaviate對PDF進行多模態RAG的解決方案 關鍵詞&#xff1a;多模態RAG、ColQwen2、Qwen2.5-VL、Weaviate 向量數據庫、PDF 檢索問答、無需 OCR、ColBERT 多向量、跨模態檢索、MaxSim 相似度、知識庫構建、AI 文檔處理、視覺語言模型、…

HTML第三課:特殊元素

HTML第三課&#xff1a;特殊元素特殊元素代碼展示特殊元素 不在行級元素和塊級元素概念里面的元素無法控制沒有寬高的元素 代碼展示 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewpo…

藍橋杯算法之基礎知識(5)

目錄 Ⅰ.in方法的使用 Ⅱ.字典的使用 Ⅲ.1MB 、KB、 B、 b(即bit)的轉換&#xff08;必學&#xff09; Ⅳ.閏年or平年 Ⅴ.count和counter方法 1. count() 方法的使用場景 2. Counter 類的介紹 3. count() 與 Counter 的區別 4. Counter 的高級應用 5.Counter的另一種使用 Ⅵ.ma…

lesson52:CSS進階指南:雪碧圖與邊框技術的創新應用

目錄 一、CSS雪碧圖&#xff1a;從性能優化到交互革命 1.1 技術原理與現代價值 1.2 2025年實現工具與自動化流程 1.2.1 構建工具集成方案 1.2.2 在線生成工具推薦 1.3 高級應用案例與代碼實現 1.3.1 多狀態按鈕系統 1.3.2 響應式雪碧圖實現 1.4 最佳實踐與性能優化 二…

案例——從零開始搭建 ASP.NET Core 健康檢查實例

1. 項目創建與基礎設置 創建新項目 首先&#xff0c;創建一個新的 ASP.NET Core Web API 項目&#xff1a; dotnet new webapi -n HealthCheckDemo cd HealthCheckDemo添加必要的 NuGet 包 添加健康檢查相關的 NuGet 包&#xff1a; dotnet add package Microsoft.AspNetCore.D…

【Java生產級避坑指南】8. Tomcat線程池下的內存地雷:ThreadLocal泄漏檢測與實戰解決

摘要:某金融交易系統(Spring Boot 2.7 + Tomcat 9)在線上運行時出現嚴重內存泄漏:堆內存(4GB)72小時內耗盡并觸發OOM,日均200萬請求場景下,Full GC頻率從正常1次/天飆升至6次/小時。排查發現,根源是ThreadLocal未清理——Tomcat線程池復用線程時,UserInfo等大對象被T…

云端職達:你的AI求職專屬獵頭,顛覆傳統招聘模式

在求職的“金三銀四”或“金九銀十”&#xff0c;每一分每一秒都彌足珍貴。面對浩如煙海的招聘信息&#xff0c;你是否還在花費大量時間一條條篩選、重復投遞簡歷&#xff0c;最終卻常常石沉大海&#xff1f;傳統求職方式的低效和“已讀不回”的窘境&#xff0c;讓許多求職者感…

Parasoft C/C++test如何實現開發環境內嵌的安全檢測

Parasoft 作為嵌入式質量與安全領域的全球領先供應商&#xff0c;其 C/Ctest 平臺依托 IDE 級原生集成、實時合規檢測引擎與缺陷閉環治理框架&#xff0c;將傳統靜態應用安全測試由項目末期集中執行前移至編碼階段&#xff0c;顯著降低缺陷修復成本并縮短認證周期&#xff0c;為…

leetcode-每日一題-人員站位的方案數-C語言

3025. 人員站位的方案數 I 輸入&#xff1a; 2 < n < 50 points[i].length 2 0 < points[i][0], points[i][1] < 50 points[i] 點對兩兩不同。 // 按x降序&#xff0c;按y升序 int cmp(const void *a, const void *b) {int *p *(int **)a;int *q *(int **)b;if(…

ClickHouse中的ON CLUSTER關鍵字

目錄 ClickHouse中的ON CLUSTER關鍵字 前置基礎 ClickHouse 中的 MergeTree 與 ReplicatedMergeTree ON CLUSTER 查詢在集群上的正確用法(為什么 查詢/寫入數據 不用 ON CLUSTER) 與不使用 ON CLUSTER 的區別 注意事項與坑 常用配套命令 ClickHouse中的ON CLUSTER關鍵字 前置…

Python繪圖動態可視化:實時音頻流

在數據可視化中&#xff0c;動畫是一種非常有效的方式&#xff0c;可以幫助我們更好地理解數據的變化和動態過程。Python 的 matplotlib.animation 模塊提供了強大的功能來創建動畫。本文將介紹如何使用 matplotlib.animation 創建簡單的動畫&#xff0c;并展示一個更復雜的實時…

【Vue2 ?】Vue2 入門之旅(七):事件處理

在前幾篇文章中&#xff0c;我們學習了指令與過濾器。本篇將介紹 事件處理&#xff0c;重點包括 v-on、事件修飾符以及鍵盤事件。 目錄 事件綁定 v-on事件修飾符鍵盤事件小結 事件綁定 v-on Vue 使用 v-on&#xff08;縮寫 &#xff09;來監聽事件。 <div id"app&qu…

高效數據傳輸的秘密武器:Protobuf

當涉及到網絡通信和數據存儲時&#xff0c;數據序列化一直都是一個重要的話題&#xff1b;特別是現在很多公司都在推行微服務&#xff0c;數據序列化更是重中之重&#xff0c;通常會選擇使用 JSON 作為數據交換格式&#xff0c;且 JSON 已經成為業界的主流。但是 Google 這么大…

騰訊混元翻譯大模型Hunyuan-MT-7B:重塑跨語言溝通的技術革命

騰訊混元翻譯大模型Hunyuan-MT-7B&#xff1a;重塑跨語言溝通的技術革命 騰訊混元Hunyuan-MT-7B大模型的發布標志著機器翻譯領域進入全新時代&#xff0c;本文將深入解析這一突破性技術如何實現30種語言翻譯冠軍的卓越表現 一、Hunyuan-MT-7B核心架構解析 1.1 基于Transformer的…

End-To-End 之于推薦-kuaishou OneRec2 筆記

End_To_End 之于推薦onerec里&#xff0c;快手利用大模型做了推薦架構的革命&#xff0c;幾個月后&#xff0c;v2之于v1是一些技術細節進行了進一步迭代&#xff0c;主要是以下兩個方面&#xff1a; 1. 架構層面的突破&#xff1a;Lazy Decoder-Only 背景問題&#xff1a;V1 的…

【LeetCode】3670. 沒有公共位的整數最大乘積 (SOSDP)

3670. 沒有公共位的整數最大乘積 - 力扣&#xff08;LeetCode&#xff09; 題目&#xff1a; 思路&#xff1a; SOSDP 本題我們顯然不能枚舉每一個數對&#xff0c;n 的復雜度顯然超時&#xff0c;所以考慮優化 我們考慮一個二進制數 mask&#xff0c;因為我們必須要選沒有任…