el-table-column中使用el-popover弹出框
时间: 2023-10-14 22:17:32 浏览: 234
Element Popover 弹出框的使用示例
可以在el-table-column的作用域插槽中使用el-popover弹出框,具体步骤如下:
1. 在el-table-column中定义作用域插槽,例如:
```html
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="showPopover(scope.row)">详情</el-button>
<el-popover ref="popover" placement="top-start" width="200">
<p>{{ popoverContent }}</p>
</el-popover>
</template>
</el-table-column>
```
2. 在组件中定义showPopover方法,用于显示弹出框:
```javascript
methods: {
showPopover(row) {
this.popoverContent = row.name // 设置弹出框内容
this.$refs.popover.$refs.popper.style.display = 'block' // 显示弹出框
}
}
```
3. 在组件中定义popoverContent数据,用于保存弹出框内容:
```javascript
data() {
return {
popoverContent: ''
}
}
```
这样就可以在el-table-column中使用el-popover弹出框了。需要注意的是,由于el-popover是懒加载的,需要手动设置弹出框的display属性为'block',否则无法显示。
阅读全文