I encountered a relatively difficult problem in recent days. The requirement is to trigger a cell in a certain column of the table and display new data in a pop-up window (not the data in the table, but need to request it again from the backend)
I've used popover display popup here
The code has been deleted. In order to record it more clearly, some codes that are not used here have been deleted.
<el-table :data="tableData" @cell-mouse-enter="cellEnter">
<el-table-column
prop="one"
label="First Column"
align="center">
<template scope="scope">
<el-popover
trigger="hover"
placement="right"
:visible-arrow="false"
:slot= popoverData
:ref= "`popover1` + scope.$index"
:popper-class= "{'pop-con' : vis !== true}">
<div v-if="vis === true" class="tips-con">
<p>event1：{{}}Parts</p>
<p>event1：{{}}Parts</p>
<p>event3：{{}}Parts</p>
<p>event4：{{}}Parts</p>
</div>
<div class="name-wrapper" slot="reference"
@mouseenter="openAction(scope.$index)"
@mouseleave="cancelAction(scope.$index)">
{{ }}
</div>
</el-popover>
</template>
</el-table-column>
</el-table>1. The triggering method is hover (written in popover trigger). Because you want to get data from the backend, add a mouse to the table (@cell-mouse-enter).
cellEnter(row, column){
if( === "First Line"){
= [];
= false;
this.$axios({
method: "post",
url: "XXXX/",
data: {
one:
}
}).then((res) => {
= ;
= true;
})
}
},2. The obtained data is stored in the global variable popoverData, and use :slot to assign values to the popup content.
3. The content of the table should be displayed in the external div of the popover component. At this time, write "slot='reference'" in the tag of this external div.
4. Since each cell shares a popover in the table, when the mouse quickly slides into several cells, multiple popovers will appear at the same time, which greatly affects the user experience. Therefore, add a unique identifier to the popover and use:ref to bind scope.$index to achieve it.
5. A problem occurs at this time. The first time the mouse slides into the first cell, it will show that popover will flash empty first, and then the data will be displayed. Therefore, the external div that displays the table contents sets the events @mouseenter and @moueleave when the mouse is moved in and out. Use $refs to execute the doShow() method when the mouse is moved in and the doClose method when the mouse is moved out.
cancelAction(index){
let refName = "popover1" + index;
this.$refs[refName].doClose();
},
openAction(index){
let refName = "popover1" + index;
this.$refs[refName].doShow();
},6. The fifth problem also exists. Add the v-if statement to the div that displays the pop-up window to control it, write the global variable vis, and the initial value is false. When the data is empty, vis is false and does not display it. When the data is passed in, vis is set to true and display. The control statement is in the cellEnter method of the second code block.
7. It has been two days since I have been able to survive, and there is still a problem with popover display. The div of the popover window is on popover. Popover has its own style. Therefore, use custom style: popper-class to modify the style, and use the global variable vis to control the timing of the display. If you write this like this, you will see a warning type check failed for prop "popperClass". Expected String, got Object Not solved now, plus the el-popover style is modified to display normally. Try to delete the pop-con style, but the popover will flash after deleting it.
.tips-con {
background-color: #000000;
font-size: 14px;
border: 0px;
opacity: 0.8;
color: #ffffff;
}
.pop-con{
display: none;
background-color: #000000;
}
.el-popover {
background-color: #000000;
border: 0px;
}8. The last question is that the small triangle arrows that popover come with have not changed their style, and they also have a lot of aesthetics. Check the element-ui document and use visible-arrow to remove them. However, you cannot assign values directly. You must add a colon before binding a false value. About colon: The colon in vue is the abbreviation of v-bind. The description of adding a colon is followed by a variable or expression. The description of not adding a colon is followed by a string literal.
The requirements are completed here!
Summarize:I have been in contact with popover for the first time, and I still have a lot of things. I need to learn Vue systematically. The small problems in details don’t need to spend too much time to solve them.
This is the article about the problems and solutions encountered by Element-UI table embedding popover. For more related Element-UI table embedding popover, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!