el-table点击事件
时间: 2023-08-19 22:02:59 浏览: 78
el-table-column组件的点击事件可以使用@click事件绑定,例如:
```
<el-table-column
v-for="column in columns"
:key="column.label"
:label="column.label"
:property="column.property"
@click="handleClick(column, $event)"
/>
```
其中handleClick是自定义的点击事件处理函数。
相关问题
js 调动el-table点击事件
可以通过在el-table组件中绑定@click事件来调用js函数。在函数中,可以使用参数来接收点击的行数据,然后进行相应的操作。具体实现方法如下:
```html
<el-table :data="tableData" @row-click="handleClick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="modifyWork(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
```
```javascript
methods: {
handleClick(row) {
console.log(row); // 输出点击的行数据
},
modifyWork(item) {
this.getAdministrativePost(); // 调用接口
this.dialogVisible4 = true; // 打开对话框
console.log('1434', item);
this.currentObj2 = item; // 将数据存储在这个对象中
}
}
```
vue-seamless-scroll el-table 点击事件
根据提供的引用内容,vue-seamless-scroll是一个Vue组件,用于实现无缝滚动的效果。而el-table是Element UI库中的一个表格组件。要实现el-table的点击事件,可以使用Vue的事件绑定机制。
以下是一个示例代码,演示了如何在el-table中添加点击事件:
```html
<template>
<div>
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
};
},
methods: {
handleRowClick(row) {
console.log('点击了表格行', row);
// 在这里可以处理点击事件的逻辑
}
}
};</script>
```
在上述代码中,通过`@row-click`绑定了一个点击事件`handleRowClick`,当用户点击el-table的某一行时,会触发该事件,并将被点击的行数据作为参数传递给`handleRowClick`方法。在`handleRowClick`方法中,可以处理点击事件的逻辑。
阅读全文