VUE el-table 表格每一个条数据编辑删除保存取消

最新推荐文章于 2024-08-19 09:00:00 发布

金戈_旭日东升

最新推荐文章于 2024-08-19 09:00:00 发布

阅读量2.7k

点赞数

分类专栏： VUE 前端

本文链接：https://blog.csdn.net/fang156239305/article/details/106112901

版权

本文介绍如何在Vue.js项目中使用el-table组件实现表格数据的编辑、删除、保存和取消操作，详细讲解了相关功能的实现步骤和关键代码，帮助开发者提升前端交互体验。

摘要由CSDN通过智能技术生成

      <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  v-if="!scope.row.editing"
                  icon="el-icon-edit-outline"
                  @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  v-if="scope.row.editing"
                  icon="el-icon-success"
                  @click="handleSave(scope.$index, scope.row)">保存
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  v-if="!scope.row