【Elements】如何获取表格中的单行数据

 #博学谷IT学习技术支持 

---

前言

个人学习笔记，欢迎指出任何错误，留言意见。

我的文章都将随着个人学习深入而定期更新。

以最简洁的风格，记录概念和方法

---

目录

前言

解决需求描述

解决方法

---

解决需求描述

使用完Element 表格组件后，想实现单行数据的删除或者修改功能，需要获取某行的数据，但是尝试请求模型的数据并不好处理，如果模型名.xx返回的也是空值。

就像我现在的需求：

解决方法

只需在表格中对应添加如下标签，

<template slot-scope="scope"></template>

定义button的click事件：一个参数为scope.row的方法 

 deleteById（scope.row）

scope.row为表格中当前行的数据对象

如下图：

<el-table-column>
<template slot-scope="scope">//定义此行代码
       <el-row>
       <el-button type="primary">修改</el-button>
       <el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
       </el-row>
       </template>
  </el-table-column>

 如何在deletById方法中请求：

使用get方式更好解释：

写在url中

后端servlet： request.getParameter（“id”）接收id数据

method: "get",

 url: "http://localhost:8080/brand-case/brand/deleteById?id="+e.id,

此处的e就是scope.row，使用此对象的属性id，获取该值

  deleteById(e){
                this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   
                    var _this = this;
                    axios({
                        method: "get",
                        url: "http://localhost:8080/brand-case/brand/deleteById?id="+e.id,
                         // data: _this.selectedIds
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.selectAll();
                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }