vue+element-ui实现表格编辑的三种实现方式

vue+element-ui实现表格编辑的三种实现方式实现表格编辑的三种实现方式

主要介绍了vue+element-ui实现表格编辑的三种实现方式，主要有表格内部显示和编辑切换，通过弹出另外一个

表格编辑和直接通过样式控制三种方式，感兴趣的小伙伴们可以参考一下

1、表格内部显示和编辑切换、表格内部显示和编辑切换

这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，

显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当

前行了，如showEdit[index]。

页面结构代码：

<template slot-scope="{row,$index}">

<span>{{$index + 1}}</span>

</template>

</el-table-column>

<el-table-column label="名称" prop="Name" width="300" header-align="center">

<template slot-scope="{row,$index}">

<input class="edit-cell" v-if="showEdit[$index]" v-model="row.Name">

<span v-if="!showEdit[$index]">{{row.Name}}</span>

</template>

</el-table-column>

<el-button type="text" size="small" @click.native="handleUpdate($index, row)" v-if="showBtn[$index]">更新</el-button>

<el-button type="text" size="small" @click.native="handleCancel($index, row)" v-if="showBtn[$index]">取消</el-button>

<el-button type="text" size="small" @click.native="handleEdit($index, row)" v-if="!showBtn[$index]">编辑</el-button>

<el-button type="text" size="small" @click.native="handleDelete($index, row)" v-if="!showBtn[$index]">删除</el-button>

</template>

</el-table-column>

</el-table>

初始化data：

data() {

return {

//点击编辑

handleEdit(index, row) {

this.showEdit[index] = true;

this.showBtn[index] = true;

this.$set(this.showEdit,row,true)

this.$set(this.showBtn,row,true)

},

//取消编辑

handelCancel(index, row) {

this.getContentList();

//点击删除

handleDelete(index, row) {