使用
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 lab
el="姓名">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
{{ scope.row.name }}
</template>
<template v-
else>
<
el-input v-mod
el="scope.row.name"></
el-input>
</template>
</template>
</
el-
table-column>
<
el-
table-column lab
el="年龄">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
{{ scope.row.age }}
</template>
<template v-
else>
<
el-input v-mod
el="scope.row.age"></
el-input>
</template>
</template>
</
el-
table-column>
<
el-
table-column lab
el="操作">
<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="canc
el(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
},
canc
el(index) {
this.editIndex = -1
}
}
}
```
完整代码如下：
```
vue
<template>
<div>
<
el-
table :data="
tableData" style="width: 100%">
<
el-
table-column lab
el="姓名">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
{{ scope.row.name }}
</template>
<template v-
else>
<
el-input v-mod
el="scope.row.name"></
el-input>
</template>
</template>
</
el-
table-column>
<
el-
table-column lab
el="年龄">
<template slot-scope="scope">
<template v-if="editIndex !== scope.$index">
{{ scope.row.age }}
</template>
<template v-
else>
<
el-input v-mod
el="scope.row.age"></
el-input>
</template>
</template>
</
el-
table-column>
<
el-
table-column lab
el="操作">
<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="canc
el(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
},
canc
el(index) {
this.editIndex = -1
}
}
}
</script>
```
这样就可以通过
Vue.js 和
Element UI
实现表格单元格编辑了。
最低0.47元/天 解锁文章
6322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
