elment-ui中的row-click怎么试用
时间: 2024-01-10 12:04:35 浏览: 24
在 Element UI 中,`<el-row>` 组件提供了 `click` 事件,可以在点击行时触发。可以按照以下步骤使用 `row-click`:
1. 在 `<el-row>` 上绑定 `click` 事件,可以使用 `@click` 或者 `v-on:click`。
2. 在事件处理函数中获取到点击的行信息,可以使用 `$event` 参数获取。
下面是一份示例代码:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
<el-table-column label="Operation">
<template #default="{ row }">
<el-button type="text" @click="handleClick(row)">Edit</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'Tom', age: 18, gender: 'male' },
{ id: 2, name: 'Jerry', age: 20, gender: 'male' },
{ id: 3, name: 'Lucy', age: 22, gender: 'female' },
],
};
},
methods: {
handleClick(row) {
console.log('Clicked row:', row);
},
},
};
</script>
```
在上面的代码中,我们使用了 Element UI 的 `<el-table>` 组件和 `<el-table-column>` 组件来渲染表格数据,同时在操作列中添加了一个按钮。当按钮被点击时,会触发 `handleClick` 方法,在该方法中输出被点击的行信息。注意,我们将点击的行信息通过参数 `row` 传递给了 `handleClick` 方法。