former circumstances
The company has often need to do some background management page, we chose Element Plus, it is based on Vue 3, for designers and developers of the component library, is the Vue framework ecosystem more fire UI component library, component library rich easy to use, component links:A Vue 3 UI framework | Element PlusThe project will often use el-select multi-select function, the component comes with multi-select interaction is also very good, the label back to display the results, while supporting the label to cancel the selection, for Element Plus 2.5 or more versions also support customized back through the slot display tag
pit stop
Recently in the development of a product to mention the optimization function, part of the form needs to be switched from single-select to multi-select, for the powerful Element Plus to el-select to increase an attribute multiple can be achieved multi-select, it is really good to use, an attribute to achieve the function from single-select to multi-select, so happy to mention the test, with the test said very simple function, you can point to test the end of the test, the test half an hour to test directly to find me, said I pit it so big misalignment problem, and I said point on the line, I was embarrassed face. Test less than half an hour test directly to find me, said I pit it, such a big misalignment problem, and I said point on the line, I was embarrassed, the test reflects the problem as follows:
Why?
So deliberately look at the el-select in the page structure, found that it is back in the style named el-select__tags element, and it is through the positioning of the realization of the cover in the input box, and its positioning is relative to the style named el-select of the root element, but the entire form and the use of the grid layout, the same line there is an item to support the height of other items will be followed by the other items, which leads to a deviation in the positioning.
Solution 1
You can give the el-select component package a layer, so that the support will only be the package of this layer, will not affect the component itself, the problem is solved!
Solution 2
Since it is positioned relative to the style named el-select component root element, then why do not we modify its relative positioning elements, change it to the style named el-tooltip__trigger element can be, in fact, here and found another small problem of the component library, an element appeared in two of the same style name
Solution 3
Since multiple selection leads to form support high, that we have any way not to let it support high it, query the component text block, found two available configuration, add collapse-tags attribute to the component, can not be displayed when it will be displayed in the back of a +N label, tell the user how many more behind, if you just add a +N label, it is not very obvious to the user in the end of the current selected items. If you just add a +N tag, it's not very obvious to the user what items are currently selected, then you can add the collapse-tags-tooltip attribute, and you'll realize that this is a great interaction, see the following picture for details:
summarize
Personally recommended the use of the third, less intrusive, modify the workload is also the smallest, but also the way I use, but also to ensure the unity of the layout of the form format, not because of multi-selected and lead to the form has a high and low impact on the beauty, of course, to solve some of the problems of the methods of thousands, which I also tried to make it beyond the display of the ellipsis, beyond the scroll bar, etc., but the experience of trying is not too ideal. If you have a better solution, welcome to leave a message to share, discuss progress together.