使用el-table设置了点击一行时被选中,如何避免点击一行中的操作栏,这一行不被选中
时间: 2023-08-31 12:34:55 浏览: 69
### 回答1:
您可以在el-table中的列定义对象中,将prop属性设置为一个自定义的值(比如‘name’),然后在操作栏中使用@click.stop来阻止点击事件的冒泡,并且使用自定义的prop属性作为参数将该行的选中状态转为false,代码如下:
```
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="操作">
<template #default="{row}">
<el-button type="text" @click.stop="handleOperation(row)">操作</el-button>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
],
selectedRowName: '' // 记录选中行的姓名
}
},
methods: {
handleRowClick(row) {
if (row.name !== this.selectedRowName) {
this.selectedRowName = row.name
}
},
handleOperation(row) {
this.selectedRowName = '' // 将选中状态转为false
// 执行操作
}
}
}
</script>
```
### 回答2:
要避免点击一行中的操作栏而不选中该行,可以根据el-table的事件进行判断处理。在点击操作栏时,阻止事件冒泡,使得点击操作栏不传递给包含该操作栏的行元素。
首先,可以通过给操作栏按钮绑定点击事件,阻止事件传播。可以在操作栏按钮的点击事件处理函数中使用`event.stopPropagation()`阻止事件冒泡。
其次,要确保该点击事件处理函数在行的点击事件处理函数之前执行。可以通过给操作栏按钮的点击事件处理函数中使用`event.preventDefault()`和`event.stopImmediatePropagation()`方法,取消默认的点击行为和终止事件传播,从而确保先执行操作栏的点击事件处理函数。
示例代码如下:
```html
<el-table @selection-change="handleTableSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column>
<template v-slot="scope">
<el-button @click="handleRowAction(scope.row, $event)">
操作按钮
</el-button>
</template>
</el-table-column>
...
</el-table>
```
```javascript
methods: {
handleRowAction(row, event) {
event.preventDefault();
event.stopImmediatePropagation();
// 处理操作栏的点击事件
},
handleTableSelectionChange(selection) {
// 处理行的点击事件
},
}
```
通过以上处理,当点击操作栏时,不会触发选中行的点击事件,从而实现了点击行操作栏时不选中该行的效果。
### 回答3:
在使用el-table设置点击一行时被选中的情况下,要避免点击一行中的操作栏导致该行被选中,可以通过以下几个步骤来实现:
1. 在el-table中添加一个自定义列,用于显示操作栏。
2. 在该操作栏列中,使用@click.stop事件修饰符来阻止点击事件向上传递,即不触发el-table的行选中事件。
3. 在操作栏列的每个操作按钮中,同样使用@click.stop事件修饰符,以阻止点击按钮时触发行选中事件。
示例代码如下:
```html
<el-table @row-click="handleRowClick">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click.stop="handleButtonClick(scope.row)">编辑</el-button>
<el-button @click.stop="handleButtonClick(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
```
```javascript
methods: {
handleRowClick(row) {
// 处理行点击事件
// 例如,根据需要进行行选中操作或其他逻辑处理
},
handleButtonClick(row) {
// 处理操作按钮点击事件
// 例如,根据需要进行编辑或删除操作
}
}
```
通过上述方法,在el-table的点击事件中,点击操作栏内的按钮时,不会触发行选中事件,从而避免了行被选中的问题,确保只有在点击行的其他区域时才会触发选中行的操作。