前言：很多时候我们需要用Element-UI中的表格表单来展示我们的数据，而很多时候我们需要对这些数据做增删改查啥的，所以需要获取每一行的数据，当前行的数据，然后才能对当前行的数据进行操作。

方法一

Vue中有一个叫插槽的东西，可以在button按钮外层 使用template 标签包裹 然后使用slot-scope="scope"，或者#default=scope进行设置 在需要获取数据的地方使用scope.row得到需要操作行的所有字段信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-table :data="tableData" :border="true" >
    <el-table-column prop="id" label="角色ID"/>
    <el-table-column prop="name" label="角色名称"  />
    <el-table-column prop="description" label="角色描述"  />
    <el-table-column prop="flag" label="唯一标识"  />
    <el-table-column label="操作" width="250">
        <template #default="scope">
        	<!-- 通过插槽scope获取当前行的数据，scope.row.id表示获取当前行的角色id -->
            <el-button size="small" @click="getRoleMenuInfo(scope.row.id)" type="info" :icon="Menu" plain>菜单管理</el-button>
            <el-button size="small" @click="" type="warning" plain>编辑</el-button>
            <el-button size="small" type="danger" @click="">删除</el-button>
        </template>
    </el-table-column>
</el-table>

方法二

Element Table控件里面提供了一个@current-change方法，这个方法的意思是，你鼠标经过的行数变了，就会触发这个函数，也就是当前行改变了就会自动调用这个函数。

这个函数有两个参数，第一个是currentRow是指当前行，oldCurrentRow指变化前的那行

注意：这个函数对上面的那种情况不太适用。

可以先声明一个响应式对象用来保存当前行的数据

1
2
// 当前行数据对象
const currentRow = ref({})

然后定义一个函数，当前行发生变化的时候自动触发

1
2
3
function TableCurrentChange(val : any){
  currentRow.value = val
}
1
2
3
4
5
6
<!-- @current-change=""后面紧跟着当前行改变后要触发的函数 -->
 <el-table :data="tableData" @current-change="TableCurrentChange" ref="singleTableRef" style="width: 98%;margin-left: 10px;height: 67vh;">
   <el-table-column prop="id" label="ID" width="100" />
   <el-table-column prop="username" label="用户名" width="120" />
   <el-table-column prop="nickname" label="昵称" width="120" />
 </el-table>