ElementUI表格中获取当前行数据

前言：

    在开发时我们有是会涉及到对表的操作，例如我们想点击操作按钮后将该行数据后获取该行中的某个数据并以该数据为参数进行下一步参数。这时怎样才能获取我们按钮这一行对应列中的数据呢？以下提供两种思路。

一、使用 row-click获取当前行数据

    直接在el-table标签上绑定一个方法@row-click=“handleEdit”。用以实现点击这一行数据时可以获取本行数据内容。

 

//表头属性内加入 @row-click="handleEdit"即可。

在method中定义

getDetails (row) {  

       console.log(row)

//此时就能拿到整行的信息  },  

//想获取行内元素的信息只需要在row后面加入相应列名即可。

二、使用 slot-scope获取数据

slot-scope是属于VUE的东西，叫做插槽至于插槽是什么请看链接

VUE插槽

    在操作列，对操作按钮先用带有slot-scope属性的dom进行包装，即可获取当前行的数据，具体的代码，除了操作列不同外，还需要删除el-table标签中绑定的*@row-click*方法，剩下的都一样：

    :data="tableData"

    style="width: 100%"

    max-height="670"

  >

    

      fixed

      prop="date"

      label="ID"

      width="110"

    >

    

    

      prop="name"

      label="时间"

      width="120"

    >

    

    

      prop="province"

      label="预警类型"

      width="90"

    >

    

    

      prop="city"

      label="可信度"

      width="90"

    >

    

    

      prop="address"

      label="坐标"

      width="250"

    >

    

    

      prop="zip"

      label="相对位置"

      width="90"

    >

    

    

      prop="guandao_distance"

      label="管道距"

      width="90"

    >

    

    

      fixed="right"

      label="操作"

      width="120"

    >

      

        

          @click.native.prevent="detailMessage (scope.row)"

          type="text"

          size="small"

        >

          操作