el-table el-popover关闭
时间: 2024-01-20 10:17:04 浏览: 91
根据提供的引用内容,el-popover在el-table中失效的问题可能是由于绑定了相同的值导致的。el-popover不支持绑定相同的值。解决这个问题的方法是确保el-popover组件绑定的值是唯一的。
以下是一个关闭el-popover的示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.name }}</p>
<el-button slot="reference" @click="closePopover(scope.$index)">Close</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John' },
{ name: 'Jane' },
{ name: 'Bob' }
]
};
},
methods: {
closePopover(index) {
this.$refs.popover[index].doClose();
}
}
};
</script>
```
在上面的示例中,我们使用了el-table和el-popover组件。当鼠标悬停在表格中的某一行时,会显示对应行的名称。点击"Close"按钮可以关闭el-popover。
阅读全文