Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
LSL1618 opened this issue Nov 1, 2024 · 0 comments

Comments

@LSL1618
Copy link

LSL1618 commented Nov 1, 2024

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

@LSL1618 LSL1618 changed the title [Bug Report] el-popover悬浮框在表格el-table单元格内的输入框中使用的异常问题 [Bug Report] el-popover悬浮框在el-table表格单元格内的输入框中使用时的异常问题 Nov 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant