解决el-table关于删除某一项时错位的问题

比眉伴天荒 2022-11-19 04:12 359阅读 0赞

# 发现问题 #

今天在做elementui的el-table时，出现了一个问题。详情：  
![在这里插入图片描述][2021041412190988.png]  
我在点ggp那一行的删除时，删除的却是zc那一行。

# 分析问题 #

参照el-table示例，发现`操作`那一列没有设置`prop`属性，而其他的列设置了，怀疑是这里出了问题。

# 解决问题 #

删除其他列的`prop`属性，自定义显示表格的内容

# 贴代码 #

<el-table :data="scoreTable" style="width: 100%" size="medium" :default-sort="{ prop: 'score', order: 'descending' }" border >
            <el-table-column label="学生姓名" sortable align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.isEdit">
                  <el-input placeholder="请输入学生姓名" v-model="scope.row.studentName" clearable @keyup.enter.native="scope.row.isEdit = false" >
                  </el-input>
                </template>
                <template v-else>
                  {
       { scope.row.studentName }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="课程名" align="center">
              <template slot-scope="scope">
                {
       { scope.row.courseName }}
              </template>
            </el-table-column>
            <el-table-column label="分数" align="center" sortable="">
              <template slot-scope="scope">
                <template v-if="scope.row.isEdit">
                  <el-input placeholder="请输入分数" v-model="scope.row.score" clearable @keyup.enter.native="scope.row.isEdit = false" >
                  </el-input>
                </template>
                <template v-else>
                  {
       { scope.row.score }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="medium" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button >
                <el-button size="medium" type="danger" @click="handleDelete(scope.$index, scope.row)" >删除</el-button >
              </template>
            </el-table-column>
          </el-table>

# 演示图 #

![在这里插入图片描述][2021041412231467.png]

[2021041412190988.png]: /images/20221022/a0f57ce9b91840c9b5dfb929c454f164.png
[2021041412231467.png]: /images/20221022/e7dae0a6f61b48138e8565f10290c3c6.png