search

ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.13k stars 14.63k forks source link

[Bug Report] el-popover悬浮框在el-table表格单元格内的输入框中使用时的异常问题 #22984

Open LSL1618 opened 4 weeks ago

LSL1618 commented 4 weeks ago

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方法就失效了！

image