el-table 可编辑
时间: 2023-09-03 10:15:04 浏览: 53
vue el-table实现行内编辑功能
4星 · 用户满意度95%
el-table 是 ElementUI 中的一个表格组件,如果想要实现可编辑功能,可以使用以下两种方式:
1. 使用 el-editable-table 组件
el-editable-table 组件是 ElementUI 中专门为表格编辑而设计的组件,可以轻松实现单元格编辑、行编辑和批量编辑等功能。
使用方法如下:
首先需要在页面中引入 el-editable-table 组件:
```
import ElEditableTable from 'el-editable-table'
Vue.use(ElEditableTable)
```
然后在 el-table 标签中使用 el-editable-table 组件即可:
```
<el-editable-table :data="tableData">
<el-table-column prop="name" label="姓名" :editable="true"></el-table-column>
<el-table-column prop="age" label="年龄" :editable="true"></el-table-column>
<el-table-column prop="sex" label="性别" :editable="true"></el-table-column>
</el-editable-table>
```
2. 自行编写编辑功能代码
如果不想使用 el-editable-table 组件,也可以自行编写代码实现表格编辑功能。具体实现方法如下:
首先在 el-table 标签中添加 :highlight-current-row="true" 属性,这样可以高亮当前行。
然后在 el-table-column 标签中添加 scoped-slot="default" 属性,用于自定义单元格内容。
接着在 methods 中添加 edit 方法,用于切换单元格为编辑状态。
最后在模板中使用 v-if 判断单元格是否为编辑状态,并根据情况显示不同的内容即可。
具体代码示例如下:
```
<el-table :data="tableData" :highlight-current-row="true">
<el-table-column prop="name" label="姓名" :formatter="nameFormatter" :editable="true" scoped-slot="default"></el-table-column>
<el-table-column prop="age" label="年龄" :editable="true" scoped-slot="default"></el-table-column>
<el-table-column prop="sex" label="性别" :editable="true" scoped-slot="default"></el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, sex: '男' },
{ name: '李四', age: 22, sex: '女' },
{ name: '王五', age: 25, sex: '男' }
],
editCell: null
}
},
methods: {
nameFormatter(row, column) {
return this.editCell === `${row.name}-${column.property}` ?
<el-input v-model={row[column.property]} size="mini" @blur={this.editCell = null}></el-input> :
row[column.property];
},
edit(row, column) {
this.editCell = `${row.name}-${column.property}`;
this.$nextTick(() => {
this.$refs[this.editCell][0].$refs.input.focus();
});
}
}
}
</script>
```
通过上述两种方式,都可以实现 el-table 可编辑的功能。具体选哪种方式,可以根据实际情况进行选择。
阅读全文