Vue使用Element-table实现动态删除某行的操作（在删除后页面中不显示该行）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue使用Element-table实现动态删除某行的操作（在删除后页面中不显示该行）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求

点击删除按钮后，在数据库中删除该行并且在当前页面不刷新的情况下不显示该行

问题

在点击删除后，将数据库中按照id删除该行以后，页面在不刷新的情况下还是显示着删除前的数据库中的数据。

解决方法

可以将删除时传入该行row的index，再将展示的数据数组通过splice(index,1)方法截取。

代码实现

mehods部分：

      async handleDelete(index, scope) {
        await this.$confirm(("您确定要删除当前：" + scope.id + "号产品吗？"), "删除确认", {
          distinguishCancelAndClose: true,
          confirmButtonText: '删除',
          cancelButtonText: '放弃删除'
        }).
          then(() => {
            this.productlist.splice(index, 1);
            deleteProduct(scope.id);
            this.$message({
              type: 'success',
              message: "删除成功！"
            })
          })
          .catch(action => {
            this.$message({
              type: 'warning',
              message: action === 'cancel' ? "放弃删除当前产品" : '停留在当前页面'
            })
          });

标签部分：文章来源地址https://www.toymoban.com/news/detail-607595.html

              <el-button type="danger" icon="el-icon-delete" size="small"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>