表格列内容过长显示省略号，并悬浮展示信息

自定义全局指令： 指定超出行数的内容，以省略号替代。

// main.ts
import App from './App.vue';
 const app = createApp(App);
 
  // 自定义指令
  app.directive('textOverflow', {
   
    mounted(el, binding, vnode) {
   
      const maxRows = binding.value || 3;
      // 添加样式
      vnode.el.className = `text-ellipsis-${
     maxRows}`;
    },
  });
    app.mount('#app');

在css文件中定义样式：

.text-ellipsis,
.text-ellipsis-1 {
   
  overflow: hidden