ElementUI uses el-popover in el-table
Vue ElementUI uses el-popover in el-table, click OK or Cancel in nested content to close el-popover.
<el-table-column width="100" align="center" label="operate">
<template slot-scope="scope">
<el-popover width="160" :ref="`popover-${scope.$index}`">
<p>Are you sure you delete this item?？</p>
<div style="text-align: right; margin: 0">
<el-button type="text" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">
Cancel
</el-button>
<el-button type="danger" size="mini" >Sure</el-button>
</div>
<el-button type="text" slot="reference">delete</el-button>
</el-popover>
</template>
</el-table-column>Method 2
<el-table-column width="100" align="center" label="operate">
<template slot-scope="scope">
<el-popover width="160" :ref="`popover-${scope.$index}`">
<p>Are you sure you delete this item?？</p>
<div style="text-align: right; margin: 0">
<el-button type="text" size="mini" @click="handleClose(scope.$index)">
Cancel
</el-button>
<el-button type="danger" size="mini" >Sure</el-button>
</div>
<el-button type="text" slot="reference">delete</el-button>
</el-popover>
</template>
</el-table-column>
<script>
...
handleClose(index) {
this.$refs[`popover-${index}`].doClose()
}
...
</script>Method 3
<div ref="closepopover">
<el-table-column label="operate">
<template slot-scope="item">
<el-popover
placement="right"
title="Confirm to delete?"
width="200"
v-model=""
trigger="click">
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="updateVisible()">Cancel</el-button>
<el-button type="primary" size="mini" @click="updateVisible()">Sure</el-button>
</div>
<el-button slot="reference">delete</el-button>
</el-popover>
</template >
</el-table-column>
//It can also be solvedupdateVisible(){
this.$();
}el-popover will not be displayed in el-table
Popover's properties are very similar to Tooltip. They all pop up prompts. Generally speaking, if it is a fixed prompt content, it is easy to use Tooltip.
When you come into contact with a requirement, one of the el-table columns shows different btns according to the data returned by the backend. When one of the btns needs a mouse hover, it obtains the id of the element of the row (it needs to be obtained through the debugging interface when hovering). At this time, using Tooltip cannot achieve the effect of dynamically displaying the prompt content.
Popover has a @show event based on Tooltip. When prompting for content hover, the @show callback can be triggered. At this time, you can request the backend interface to obtain the required data.
Problem: When using el-popover in el-table-column, sometimes the hover does not display the prompt box.
As we all know, el-table-column represents a column in which an el-popover is written, which is equivalent to writing N numbers (N depends on the array length of data in el-table) table is often used with paging.
The following is a personal guess, to explain it to yourself
Because of the length of el-table data, multiple el-popovers are traversed. el-popover is determined based on the condition === 1 (I won’t write some familiarity with el-popover)
<el-table-column >
<template #default="{row}">
<el-popover ....>
<span>Text content to be displayed</span>
<div slot="reference" v-if=" === 1">View content</div>
</el-popover>
<div v-if=" === 2">No content yet</div>
</template>
</el-table-column>At this time, a situation may occur. There are 10 pieces of data on the first table on the first page, of which the first and the fifth ones === 1
Page 2 There are only 2 pieces of data, the first one === 2 The second one === 2
Bug reproduction: When I first enter the page, hover the first piece of data on the first page can display the <span> content normally, and the fifth piece of <span> content can also be displayed normally.
When I switch to the second page, since there are only two data on the second page, and status === 2, hover will not display the data. At this time, I switch to the first page and hover again to the first data to find that the data with === 1 no longer displays the <span> content, however, the fifth data on the first page === 1 can still display the <span> content normally.
After the above operations, (I personally think that there is no official judgment) the first item on the first page should have hovered the content of <span> but not displayed because it may have reused the first item on the second page === 2 el-popover
To prevent el-popover reuse, two methods are taken:
1. Give el-popover different refs
2. Move the v-if judgment synchronously into el-popover
<el-table-column >
<template #default="{row}">
<el-popover v-if=" === 1" :ref="`node-${}`">
<span>Text content to be displayed</span>
<div slot="reference" v-if=" === 1">View content</div>
</el-popover>
<div v-if=" === 2">No content yet</div>
</template>
</el-table-column>When !==1, el-popover is naturally destroyed, and there is no reuse. If the first page and the second page are both === 1, then the ref will not be reused (the underlined content is for personal judgment)
After the above operations, the problem of el-popover not being displayed can be roughly solved (because I don’t have a deep understanding of this organization, I dare not guarantee it. 100% solution)
Extra content:
By checking the source code of el-popover, I found that there are some methods not given by element component options, which can be used with ref to achieve some special functions. By this.$refs['el-popover'].Method()
By looking at the source code, you can find that the methods in el-popover have the following methods:
-
doShow(): Show el-popover -
doClose(): Close el-popover -
doToToggle(): Negative Close it will be displayed, and display it will be closed
tips:
When slot="reference" is not written in el-popover, the content will not be displayed (div content). For example:
<el-popover> <div>Not usedslotSlot</div> </el-popover>
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.