El-table custom field content plus el-tooltip

Posted Jun 15, 20202 min read

table-tooltip component

  1. In the component, the styles of the outer and inner elements are written in the style. After the tooltip is added normally, the tooltip will be displayed regardless of whether the length of the inner element is greater than the width of the outer element.

  2. Therefore, we need to add a layer of judgment based on the width of the outer element and put it in the disabled of the tooltip. Although we can get the width of the parent and child elements during mounting during component initialization, but when the width of the table field changes, we cannot respond to disabled in real time. Value, you might think of using watch to monitor the width of the element, but the actual vue is not able to monitor the length and width of the dom

  3. So we use custom instructions here to add local instructions to monitor the change of element width, the code is as follows: