VueJS列表页点击编辑跳转至带数据编辑页问题求助

别担心，刚接触Vue遇到这种问题很正常，我帮你一步步排查并修复代码：

1. 修正列表页的编辑跳转逻辑 #

你当前的handleEdit方法传参有误，this.CN是未定义的变量，应该传递当前点击行的CN值。修改列表页的handleEdit方法：

handleEdit(index, row) {
  // 传递当前行的CN参数到路由
  this.$router.push({ name: 'EditClass', params: { CN: row.CN } })
}

2. 编辑页接收路由参数并初始化表单数据 #

首先在编辑页的data里定义表单绑定的对象ListClass，然后在组件挂载时，根据路由参数里的CN匹配对应的数据项，填充到表单中（因为你用的是模拟数据，暂时把列表页的测试数据复制过来，真实项目里替换为接口请求即可）：

export default {
  name: 'EditClass',
  data() {
    return {
      ListClass: {},
      // 复制列表页的模拟数据，真实项目改为接口请求
      tableData: [{ CN: 'A+', NCV:'2', MCV:'4', DVD: '-1', CT:'PM' }, { CN: 'A', NCV:'1', MCV:'3', DVD: '-1', CT:'AM' }, { CN: 'B', NCV:'4', MCV:'6', DVD: '-1', CT:'PH' }, { CN: 'C', NCV:'1', MCV:'3', DVD: '-1', CT:'PH' }]
    }
  },
  mounted() {
    // 获取路由参数中的CN值
    const currentCN = this.$route.params.CN
    // 从模拟数据中找到对应的数据项
    const targetClass = this.tableData.find(item => item.CN === currentCN)
    // 浅拷贝赋值给表单对象，避免直接修改原数据
    if (targetClass) {
      this.ListClass = { ...targetClass }
    }
  }
}

3. 修正编辑页的表单绑定 #

你当前用的value="ListClass.CN"是静态字符串绑定，无法实现双向数据绑定，必须改用v-model指令：

<template> 
<!-- Contact Section start --> 
<el-form ref="form" label-position="top" :model="ListClass" label-width="200px" class="editClass"> 
  <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p" >
    <el-form-item label="Edit Class">
      <el-input placeholder="Class Name" v-model="ListClass.CN"/>
    </el-form-item>
  </el-col>

  <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
    <el-form-item label="Minimum Calls Per Cycle">
      <el-input placeholder="MinCalls" type="number" v-model="ListClass.NCV"/>
    </el-form-item>
  </el-col>

  <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
    <el-form-item label="Maximum Calls Per Cycle">
      <el-input placeholder="MaxCalls" type="number" v-model="ListClass.MCV"/>
    </el-form-item>
  </el-col>

  <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
    <el-form-item label="Visit Valid Difference Days">
      <el-input placeholder="VisitValidDiffDays" type="number" v-model="ListClass.DVD"/>
    </el-form-item>
  </el-col>

  <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
    <el-form-item label="Type">
      <el-select style="width:100%" placeholder="Select Type" v-model="ListClass.CT">
        <el-option label="AM" value="AM"/>
        <el-option label="PM" value="PM"/>
        <el-option label="PH" value="PH"/>
      </el-select>
    </el-form-item>
  </el-col>

  <el-col class="col-p">
    <el-form-item>
      <button type="button" @click="onSubmit()">Edit</button>
    </el-form-item>
  </el-col>
</el-form> 
<!-- Contact Section End --> 
</template>

4. 可选：完善编辑提交方法 #

如果需要实现提交逻辑，可以在编辑页添加onSubmit方法：

methods: {
  onSubmit() {
    // 这里可以添加表单验证、提交接口的逻辑
    console.log('提交的编辑数据:', this.ListClass)
    // 提交成功后可跳回列表页
    // this.$router.push('/your-list-page-path')
  }
}

这样修改后，点击列表页的编辑按钮，就能跳转到编辑页并自动填充对应的数据了。

内容的提问来源于stack exchange，提问作者Hani Gerges