1. 属性(更多)
-
row-click 当某一行被点击时会触发该事件 row, column, event
-
在Element UI的el-table组件中，要实现点击整行跳转，可以使用@row-click事件。这个事件会在用户点击表格的一行时触发，并提供当前行的数据和行索引。
-
以下是一个简单的例子，展示如何使用@row-click事件来实现点击整行跳转：
2. 代码实现
<template><el-table:data="tableData"style="width: 100%"@row-click="handleRowClick"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '李小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '赵小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '孙小虎',address: '上海市普陀区金沙江路 1516 弄'}]};},methods: {handleRowClick(row, event, column) {// 这里可以实现点击后的行为，比如页面跳转// 使用 row 来获取当前行的数据console.log(row);// 可以通过编程式导航来实现页面跳转，例如：// this.$router.push({ path: `/user/${row.id}` });}}
};
</script>- 在上面的例子中，当用户点击表格的任何一行时，handleRowClick方法会被调用，并且当前行的数据会作为参数传入。在这个方法里，你可以实现任何你想要的行为，比如页面跳转。
 :not() ）)
)
