发现问题
今天在做elementui的el-table时,出现了一个问题。详情:
我在点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>