vue+element-ui实现表格编辑

前端小木

已于 2023-12-01 14:01:28 修改

阅读量8.9w

点赞数 19

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue element-ui 表格编辑

于 2018-07-24 14:59:37 首次发布

本文链接：https://blog.youkuaiyun.com/liaoxuewu/article/details/81184821

本文介绍了三种使用Vue和Element-UI实现表格编辑的方法：1）表格内部显示和编辑切换，通过span和input切换实现；2）弹出对话框进行编辑，使用隐藏的dialog和独立的表单；3）通过样式控制，利用current-row类切换编辑状态。在实际应用中，根据项目需求和性能考虑选择合适的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三种实现方式

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}">
            <input class="edit-cell" v-if="showEdit[$index]"    v-model="row.Name">
            <span v-if="!showEdit[$index]">{
  
  {row.Name}}</span>
        </template>