Question

我有3页 1-列出表中的所有数据 2-添加页面，我可以在其中添加数据（但现在我在代码中使用虚拟数据） 3-编辑页面，假设它与添加页面的设计相同，因为我编辑相同的数据 -一周多以来，我一直在寻找如何按下编辑键的方法，它使我进入包含（name等）数据的编辑页面，并将其插入编辑页面表单中

这是我的列表数据代码

<template>
  <el-table 
    :data="tableData"
    :default-sort = "{prop: 'CN', order: 'ascending'}"
    style="width: 100%">
    <el-table-column
      label="Class Name"
       prop="CN"
      sortable
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.CN }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Class Minimum Visits"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.NCV }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Class Maximum Visits"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.MCV }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Difference Valid Days"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.DVD }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Class Type"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.CT }}</span>
      </template>
    </el-table-column>


    <el-table-column
      label="Operations">
      <template slot-scope="scope">
        <el-button :plain="true"
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>


        <el-button :plain="true"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)" >Delete</el-button>

      </template>
    </el-table-column>
  </el-table>

</template>

<script>
  export default {
    data() {
      return {
        visible2: false,
        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'
        }]
      }
    },
    methods: {

      handleEdit(CN, row) {
    this.$router.push({name:'EditClass' ,params: {CN: this.CN}})
      },
      handleDelete(index, row) {
        this.$message({
          message: 'Class ' +' '+  row.CN +' '+' Deleted Successfully',
          type: 'success'
        });
        this.tableData.splice(row,1);
      },
      editClass(editClass) {
    this.$router.push({name:'EditClass'})
        }
    }
  }
</script>

在通过CN的路线中，像这样：

path: '/EditClass/:CN',
            name: 'EditClass',
            component: EditClass,

在“编辑”页面

<template>
    <!-- Contact Section start -->
    <el-form ref="form" label-position="top" :model="ListClass" label-width="200px" class="editClass">
            <el-col>
                <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p" >
                    <el-form-item label="Edit Class">
                        <el-input  placeholder="Class Name" value="ListClass.CN"/>
                    </el-form-item>
                </el-col>
            </el-col>
            <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" value="ListClass.NCV"/>
                    </el-form-item>
                </el-col>
            </el-col>
            <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" value="ListClass.MCV"/>
                    </el-form-item>
                </el-col>
            </el-col>
            <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" value="ListClass.DVD"/>
                    </el-form-item>
                </el-col>
            </el-col>
            <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">
                        <el-option>
                        </el-option>
                    </el-select>                
                </el-form-item>
                </el-col>

            </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>
<script>
 export default{
  name:'EditClass',
  data(){
   return{
   }
  }

 }
</script>

我对Vue的体验太小了...

Answer 1

我认为，您有三种选择：

就像@lmarqs一样，您可以使用vuex，但是如果这是唯一的用例，那会有些过分。
因此您可以使用Custom Events，就像@ittus解释here一样，他也链接了this tutorial。
或者您使用路由器构建类似parent的网址，然后在组件中获取此ID并向api提出新请求（不是很好的解决方案）

VueJS在新页面的表中编辑数据

1 个答案: