当某一行被点击时会触发该事件 row, event, column
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Morris.js Charts</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/elementUI/elementUI.css">
<style>
</style>
</head>
<body class="">
<div id="demo">
<el-table
:data="tableData6"
border
style="width: 100%" @row-click="clickTr">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
</el-table>
</div>
<script src="../js/vue.js"></script>
<script src="../plugins/elementUI/elementUI.js"></script>
<script>
var demo = new Vue({
el: '#demo',
data: {
tableData6: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
},
methods: {
clickTr(row, event, column){
//console.log(row["id"]) 跟下面效果一样
console.log(row.id)//获取各行id的值
}
}
})
</script>
</body>
</html>