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"
        border
        style="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-input
        type="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过来代码，我试试效果：

我去，太完美了，效果完全实现。这是一个什么时代，太可怕，太喜人。

问题总结

心路历程：不知所措、试一下、惊为天人、可怕、喜人。

任何一个领域，但凡学习点基础知识，然后借助这种模型的能力。真的似乎，可以无所不能。讲真