使用
Vue.js 和 Element UI
实现表格单元格编辑的步骤如下：
1. 导入 Element UI 的
表格和表单组件：
```
vue
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<!--
表格列定义 -->
</el-table>
</div>
</template>
<script>
import { ElTable, ElTableColumn, ElInput } from 'element-ui'
export default {
components: {
ElTable,
ElTableColumn,
ElInput
},
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
],
editIndex: -1
}
}
}
</script>
```
2. 在
表格中的每一行定义一个
编辑按钮，点击
编辑按钮后将当前行进入
编辑状态：
```
vue
<el-table :data="tableData" style="width: 100%">
<el-table-column label="姓名">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
{{ scope.row.name }}
</template>
<template v-else>
<el-input v-model="scope.row.name"></el-input>
</template>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
{{ scope.row.age }}
</template>
<template v-else>
<el-input v-model="scope.row.age"></el-input>
</template>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
<el-button type="primary" size="small" @click="edit(scope.$index)">
编辑</el-button>
</template>
<template v-else>
<el-button type="success" size="small" @click="save(scope.$index)">保存</el-button>
<el-button type="warning" size="small" @click="cancel(scope.$index)">取消</el-button>
</template>
</template>
</el-table-column>
</el-table>
```
3. 定义
编辑按钮的点击事件和保存、取消按钮的点击事件：
```
vue
export default {
// 省略其他代码
methods: {
edit(index) {
this.editIndex = index
},
save(index) {
this.editIndex = -1
},
cancel(index) {
this.editIndex = -1
}
}
}
```
完整代码如下：
```
vue
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="姓名">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
{{ scope.row.name }}
</template>
<template v-else>
<el-input v-model="scope.row.name"></el-input>
</template>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
{{ scope.row.age }}
</template>
<template v-else>
<el-input v-model="scope.row.age"></el-input>
</template>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
<el-button type="primary" size="small" @click="edit(scope.$index)">
编辑</el-button>
</template>
<template v-else>
<el-button type="success" size="small" @click="save(scope.$index)">保存</el-button>
<el-button type="warning" size="small" @click="cancel(scope.$index)">取消</el-button>
</template>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { ElTable, ElTableColumn, ElInput, ElButton } from 'element-ui'
export default {
components: {
ElTable,
ElTableColumn,
ElInput,
ElButton
},
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
],
editIndex: -1
}
},
methods: {
edit(index) {
this.editIndex = index
},
save(index) {
this.editIndex = -1
},
cancel(index) {
this.editIndex = -1
}
}
}
</script>
```
这样就可以通过
Vue.js 和 Element UI
实现表格单元格编辑了。
最低0.47元/天 解锁文章
7940
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
