使用el-popover在表格中点击弹框只显示点击到的那一列出现弹框,其他列不显示
时间: 2024-04-12 12:27:41 浏览: 18
要在表格中使用 el-popover 弹出框,只显示点击到的那一列,可以通过监听表格的点击事件,根据点击的列来控制弹框的显示和隐藏。下面是一个示例代码:
```html
<template>
<div>
<el-table
:data="tableData"
@row-click="handleRowClick"
border
>
<el-table-column
prop="name"
label="名称"
></el-table-column>
<el-table-column
prop="age"
label="年龄"
></el-table-column>
<el-table-column
prop="action"
label="操作"
>
<template slot-scope="{ row }">
<el-button
type="text"
@click.stop="handleClick(row)"
>
点击
</el-button>
</template>
</el-table-column>
</el-table>
<el-popover
v-model="popoverVisible"
placement="top"
width="200px"
>
<p>弹框内容</p>
</el-popover>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
popoverVisible: false,
};
},
methods: {
handleRowClick(row) {
// 隐藏弹框
this.popoverVisible = false;
},
handleClick(row) {
// 显示弹框
this.popoverVisible = true;
},
},
};
</script>
```
在上面的示例代码中,通过监听 `row-click` 事件来隐藏弹框,监听按钮的点击事件来显示弹框。点击表格中的某一行时,会触发 `row-click` 事件,此时将弹框隐藏。点击按钮时,会触发 `handleClick` 方法,此时将弹框显示。这样就可以实现只显示点击到的那一列出现弹框,其他列不显示的效果。