Vue中实现ElementUI的Table点击某一行事件：

1、需求：

通过点击右侧表格某一行（获取这一行的数据），将数据渲染到左侧

2、Table某一行的点击事件：

3、结果：

<template>
   	<el-table :data="tableData" stripe @row-click="handleTableRow" :highlight-current-row="true"
   	:header-cell-style="{ background: '#081832', color: '#fff' }">
   	// @row-click="handleTableRow"点击某一行事件;
   	//:highlight-current-row="true"选中当前行高亮
   	//:header-cell-style设置Table头的样式
   		<el-table-column type="selection" :reserve-selection="true" align="center" width="50" />
        <el-table-column type="index" label="序号" align="center" width="50" />
 	</el-table>
</template>

 <script>
 export default {
	data() {
 		return {
   			tableData: []
		}
  	},
 	methods: {
    	handleTableRow(row, event, column) {
      		console.log(row, event, column)
  		}
    }
 }
</script>

<style scoped>
//设置行的样式
>>>.el-table tr {  
    background: #081832;
    color: #FFF;
}
//设置行的hover样式
>>>.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background: rgb(36, 148, 215);
    color: #FFF;
}
//设置行的active样式
>>>.el-table__body tr.current-row>td.el-table__cell {
    background: rgb(4, 75, 137);
    color: #FFF;
}
</style>