ElemeFE
[Bug Report] el-popover悬浮框在el-table表格单元格内的输入框中使用时的异常问题
Element UI version
2.15.14
OS/Browsers version
Windows11
Vue version
2.7.16
Reproduction Link
https://elementui.github.io/issue-generator
Steps to reproduce
HTML部分：
<el-table :data="rows" border size="small" highlight-current-row height="calc(100% - 150px)" style="width: 100%;">
<el-table-column label="行号" type="index" width="50"></el-table-column>
...
<el-table-column label="采购厂家" prop="purchaseManufacturer" width="100" show-overflow-tooltip>
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-popover placement="bottom" trigger="focus" :ref="'popover_purchase_manufacturer_' + scope.$index" popper-class="popover_dictionary">
<el-radio-group v-model="scope.row.purchaseManufacturer" size="mini" @change="onRadioGroupChangeForPurchaseManufacturer($event, scope.$index)" style="height: 100%;overflow: scroll;">
<template v-for="(item, index) in manufacturerOptions">
<el-radio :label="item.optionName" :key="item.id + '_' + index" border style="margin-bottom: 5px;margin-right: 5px;">{{item.optionName}}</el-radio><br/>
</template>
</el-radio-group>
<el-input type="text" size="mini" slot="reference"
v-model.trim="scope.row.purchaseManufacturer"
placeholder=""
autocomplete="off"
@focus="onInputFocusForPurchaseManufacturer($event, scope.$index)"
@input="onInputValueChangeForPurchaseManufacturer($event, scope.$index)"
style="width: 100%;"
clearable>
</el-input>
</el-popover>
</template>
<template v-else>
<span style="color: black;">{{scope.row.purchaseManufacturer}}</span>
</template>
</template>
</el-table-column>
...
</el-table>
JS部分：
onRadioGroupChangeForPurchaseManufacturer: function (value, rowIndex) {
console.info('onRadioGroupChangeForPurchaseManufacturer value----->', value, rowIndex);
// 关闭当前popover悬浮框
vm.$refs['popover_purchase_manufacturer_' + rowIndex].doClose();
},
onInputFocusForPurchaseManufacturer: function (event, rowIndex) {
console.info('onInputFocusForPurchaseManufacturer rowIndex----->', rowIndex);
vm.manufacturerOptions = vm.manufacturerOptionsCopy.slice(0, vm.manufacturerOptionsRange);
},
onInputValueChangeForPurchaseManufacturer: function (value, rowIndex) {
console.info('onInputValueChangeForPurchaseManufacturer rowIndex----->', rowIndex);
let search = value;
if (search) {
let waitRenderOptions = vm.manufacturerOptionsCopy.filter((item, i) => {
return item.optionName.indexOf(search) != -1
|| item.pinyinShortCode.indexOf(search) != -1 || item.pinyinFullCode.indexOf(search) != -1;
});
vm.manufacturerOptions = waitRenderOptions.slice(0, vm.manufacturerOptionsRange);
} else {
vm.manufacturerOptions = vm.manufacturerOptionsCopy.slice(0, vm.manufacturerOptionsRange);
}
},
异常问题出在onRadioGroupChangeForPurchaseManufacturer事件中的el-popover实例的doClose方法，效果是单元格中的输入框绑定的el-popover悬浮框中的单选框组选完任意一个选项后自动隐藏el-popover悬浮框，正常情况下是有效的，但当el-table表格中随便一列设置为fixed固定列时，el-popover实例的doClose方法就失效了！
What is Expected?
el-table表格中无论是否有fixed固定列存在，都不应该影响el-popover实例的doClose方法！
What is actually happening?
el-table表格中随便一列设置为fixed固定列时，el-popover实例的doClose方法就失效了！
fixed列其实由两个table组合成，很有可能是因为vm.$refs没有拿到真正展示的ref，要通过dom一层层找到真实展示那个popover
我打印过$refs拿到的el-popover实例对象，就是当前显示的目标实例，获取实例这一步并没有问题。我还单独用这个实例在Console控制台直接手动执行doClose()方法，结果也是不生效。
fixed列其实由两个table组合成，很有可能是因为vm.$refs没有拿到真正展示的ref，要通过dom一层层找到真实展示那个popover
我打印过$refs拿到的el-popover实例对象，就是当前显示的目标实例，获取实例这一步并没有问题。我还单独用这个实例在Console控制台直接手动执行doClose()方法，结果也是不生效。
@LSL1618 说的没问题，由于加了fixed属性，打开调试工具能看到有两个el-table，一个是页面中显示出来的，另一个是隐藏的，你在作用域插槽中加的ref，绑定到了隐藏的那个表格中，所以无效，如果要调用el-popper的实例方法，目前看来无解。找到解决办法了通知我。。。
