The width of element UI’s el-select and options boxes is problematic

Final rendering

When data is available:

No data:

Common case. – When there is data

Code:

<el-select v-model="devType" style="width:100%">
	<el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
Copy the code

Description:

Controls the width of the selection box by setting the style of el-select.

Control the width of the option box that pops up after clicking on the selection box. You can also set the style of el-Option directly, but note that it may need to be written! Important takes effect only.

Question:

What if I want to set the minimum width of el-Option to be equal to el-select?

The actual operation shows that if the option is short, the adaptive width is usually smaller than the width of the selection box, and the effect is shown in the figure below:

But after refreshing the page, click the view option again, and its adaptive width is equal to the width of the selection box, as shown in the picture below:

Inexplicable, the source does not understand, did not see how to trigger the adjustment of the width of the option box, so only human intervention.

Think about:

Just get the width of el-Select and assign it to el-Option.

The solution code is as follows:

<el-select v-model="devType" @focus="setMinWidth" style="width:100%">
	<el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value" :style="{'min-width': minWidth + 2 + 'px'}"></el-option>
</el-select>
setMinWidth (val) {
    this.minWidth = val.srcElement.clientWidth
}
Copy the code

Description:

1. Add focus event to el-select. When the input of the select box gets focus, the width of the current node is saved as the minimum width.

2, the el-option binding style min-width is the minimum width.

Note:

Since el-Options under different selection boxes do not appear at the same time, it does not matter if you change the width of multiple option boxes on the same interface.

Common case – No data

There is also a problem with the “no data” selection box, as shown in the figure

Binding style to El-Option is invalid because el-Option does not exist.

The solution code is as follows:

<el-select v-model="devType" style="width:100%" @focus="setMinWidthEmpty"> <el-option v-for="item in devTypes" Value :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> setMinWidthEmpty (val) { Reminder to please select set minimum width let domEmpty = document. The getElementsByClassName (' el - select - dropdown__empty) if (domEmpty. Length > 0) { domEmpty[0].style['min-width'] = val.srcElement.clientWidth + 2 + 'px' } }Copy the code

Description:

  • 1. Add focus event to el-select. When the input of the select box gets focus, the width of the current node is saved as the minimum width.
  • 2. Get the el-select-dropdown__empty node and set the minimum width.

Note:

  • 1. GetElementsByClassName is not getElementByClassName
  • 2. If there is data in the current selection box, an error is reported during the execution of this section. The number of empty nodes must be determined, and then the minimum width should be set.
  • 3. If there are multiple el-select-dropdown__empty nodes at the same time, the minimum width should be traversed, but I only set the first one to work, for unknown reasons.