Element-PLUS下拉框、日期组件、下拉菜单定位问题 element-plus下拉框组件定位问题 element-plus日期组件定位问题

Element-PLUS下拉框、日期组件定位问题 element-plus下拉框组件定位问题 element-plus日期组件定位问题

  • 1、增加全局样式
  • 2、使用
    • 2.1、下拉框使用
    • 2.2、日期组件使用

1、增加全局样式

.el-popper.is-pure {
  inset: 36px auto auto 0px !important;
}

2、使用

Element-PLUS 下拉框、日期、下拉菜单等组件使用的都是 Popover,在组件中增加 :teleported="false" 属性,所有Popover相关的组件都可以参考下面示例解决

2.1、下拉框使用

	<el-select :teleported="false" v-model="status" placeholder="请选择">
		<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value * 1" />
	</el-select>

2.2、日期组件使用

在增加:teleported="false" 属性的基础上,设置 :popper-options 属性

	<el-date-picker
		:teleported="false"
		:popper-options="{
			modifiers: [
				{
					name: 'flip',
					options: {
						fallbackPlacements: ['bottom'],
						allowedAutoPlacements: ['bottom'],
						},
				},
						],
		}"
		v-model="estimatedTime"
		placeholder="请选择"
		style="width: 200px"
		type="date"
		value-format="YYYY-MM-DD"
       />

你可能感兴趣的:(vue.js,element-ui,element-plus,vue,vue.js)