vue+element-ui实现表格编辑_vue+elementui 实现可编辑动态表格

三种实现方式

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

这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当前行了，如showEdit[index]。

页面结构代码：

<el-table
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    header-align="center">
    <el-table-column  width="50" header-align="center">
        <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}">
    
1
2
3
4
5
6
7
8
9
10
11
12
13