element的table获取当前表格行
在Element UI中,要获取当前表格行的数据,可以使用row
属性,该属性在表格的某一行被点击时会被设置为该行的数据对象。以下是一个简单的例子,展示了如何在Element UI的表格中获取当前行的数据:
<template>
<el-table
:data="tableData"
@row-click="handleRowClick"
>
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', ... },
{ date: '2016-05-04', name: '张小刚', ... },
// 其他数据
]
};
},
methods: {
handleRowClick(row, column, event) {
// row 是当前行的数据
console.log(row);
}
}
};
</script>
在上面的代码中,handleRowClick
方法会在点击表格的某一行时被触发,并接收到被点击的行的数据row
。你可以在这个方法中做进一步的处理,比如显示详情、设置当前行的状态等。
评论已关闭