一、需求剖析，疑问形容

1、需求

一个表格，分表头、表体、表尾三局部。

当每个单元格的内容过长超出时，须要省略，用省略号替代超出的局部。

同时，当鼠标移入上去时，会在上方弹出一个小揭示框，其外部可以展现完整的对应内容，当鼠标移出时，暗藏小揭示框。

2、疑问

二、处置疑问，答案速览

实现代码如下，复制粘贴即可间接经常使用。

1、表头成功

表头成功的关键，在于在每一栏中拔出表头插槽，并自定义外部的内容。

假设你有期间，详细代码剖析、常识总结，可见第三局部。

12<el-table-column>34<template#header>56<el-tooltip:disabled="isShowTooltip">78<div@mouver="onMouseOver($event.target)">PrincipalRepayment</div>9</el-tooltip>10</template>1112<template#default="scope">{{scope.row.principal}}</template>13</el-table-column>1415//逻辑代码16//Tooltip能否禁用标识自动禁用17constisShowTooltip=ref(true)18//表格鼠标移入事情19constonMouseOver=(target:any)=>{20//判别能否开启tooltip配置21if(target.scrollWidth>target.clientWidth){22isShowTooltip.value=false;23}else{24isShowTooltip.value=true;25}26}2728//样式代码29//单行文本省略30.singe-line{31text-overflow:ellipsis;32overflow:hidden;33-break:break-all;34white-space:nowrap;35}

2、表体成功

表体成功的关键，在于在每一栏中减少show-overflow-tooltip属性，当内容过长被暗藏时显示tooltip小揭示框。

假设你有期间，详细代码剖析、常识总结，可见第三局部。

3、表尾成功

表尾成功的关键，在于经差错掉表尾元素，为其追加一个tooltip小揭示框子元素，并为其绑定指定列的内容和鼠标移入移出事情。

该成功形式为原生js成功，代码比拟冗余。大澈并没有找到最优的答案，网上对此疑问的形容也很少，假设看到这有最优解的好友，感谢留言，已协助更多其余好友！

假设你有期间，详细代码剖析、常识总结，可见第三局部。

12<el-table:data="tableData"bordershow-summary:summary-method="getSummaries"max-height="500">3</el-table>456//逻辑代码7//算计数据8letsumsValue=[]asany910//表格算计列逻辑11constgetSummaries=(param:SummaryMethodProps)=>{12const{columns,/>
2、表体如何成功省略揭示成果？
表体成功的关键，在于在每一栏中减少show-overflow-tooltip属性，当内容过长被暗藏时显示tooltip小揭示框。
show-overflow-tooltip属性加在Table上，影响的将是所有列，加在Table-column上时，影响的将是指定列，这里可以依据详细业务需求减少。
show-overflow-tooltip属性说明如下：
3、表尾如何成功省略揭示成果？
表尾成功的关键，在于经差错掉表尾元素，为其追加一个tooltip小揭示框子元素，并为其绑定指定列的内容和鼠标移入移出事情。
在表格算计回调里，先把算计数据存到数组变量中，然后经差错掉表尾元素，为其追加一个tooltip小揭示框子元素，再依次将数组变量中的算计数据对应下标取出为其赋值，并经过鼠标事情和样式显示暗藏来管理其展现。
Table几个属性说明如下：
4、如何成功单行省略和多行省略？
1//单行文本省略2.singe-line{3text-overflow:ellipsis;//文本超出显示省略号4overflow:hidden;//文本超出暗藏5white-space:nowrap;//只保管一个空白，文本不会换行6}78//两行文本省略9.two-line{10display:-webkit-box;//将盒子转换为弹性盒子11-webkit-box-orient:vertical;//文本显示形式，自动水平12-webkit-line-clamp:2;//设置显示多少行13text-overflow:ellipsis;//文本超出显示省略号14overflow:hidden;//文本超出暗藏15}

Vue3Element UI plus使用

Element UI 支持Vue2，如果在Vue3使用，需要使用Element UI Plus。 首先安装： npm install element-plus --save 然后在项目中引用： import ElementPlus from element-plus import element-plus/dist/ 在vue的app中注册： (ElementPlus) 然后在模板中就可以使用了。 比如 <el-button>Default</el-button> 当然也可以按需要引用和注册，不过稍微麻烦一些。

Vue3+elemetPlus支持动态路由和菜单管理UI框架

内容较多请耐心阅读，你认真读完一定获益匪浅 这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常优秀。 你通过使用它直接实现动态路由和菜单管理功能，实现快速开发。 支持二级菜单管理和嵌套路由管理。 element-plus: ^1.0.2-beta.70, vue: ^3.0.0, vue-router: ^4.0.0-0 1、unituicli3是一个基于vue3搭建的一个项目，它是 与时俱进 的， 极具时代性，紧跟vue3的脚步 。 2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何JavaScript库。 这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库， 避免因为项目集成库过多给你带来烦恼 。 3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使 路由和菜单管理可视化 。 同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。 4、美丽的视图框架，我们 内置了一个后台管理UI框架 ，你可以通过使用它实现admin项目的快速生成和搭建。 当然你也可以自己搭建自己喜欢的UI框架结构。 5、 更少的干扰 。 为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。 Unituicli3因为《组件管理》而显得强大，因为这是 核心组件 ，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。 我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。 import { createApp } from vue import ElementPlus from element-plus; import App from ./ import router from ./router import @/unitui/init_//这是为了实现防止刷新路由丢失 const app = createApp(App) (ElementPlus) (router)(#app) // 注册全局组件 import Uicon from ./unitui/sub/ (Uicon,Uicon) 你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改 这是一个全局注册的图标选择器，你可以在任意组件通过使用图标选择器，它挂载在文件中，你如不是使用element你需要做出修改，否则可能 影响图标选择的功能使用 。 实际效果 这是一个非常重要的内置组件，它主要用于模拟登录时的操作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。 其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下： init_route(route_data) { //依据后端返回的json数据生成路由 const init_route_data = []; //定义一个路由数组储存生成的路由信息 for (let index = 0; index < route_; index++) { //循环后端返回的json //循环 if (route_data[index] != undefined) { //有children时生成路由数组方法 init_route_data[index] = { path: route_data[index], //路由url name: route_data[index], //路由名 component: () => import(`@/${route_data[index]}`), // component: (resolve) => require([`@/views/${route_data[index]}`], resolve), //加载后端json描述的vue文件 meta: { //路由一些附加信息 show_site: route_data[index]_site, //是否全屏显示 web_title: route_data[index]_title //网站标题 }, children: [] //嵌套路由 }; for (let i = 0; i < route_data[index]; i++) { init_route_data[index][i] = { path: route_data[index][i], //路由url name: route_data[index][i], //路由名 component: () => import(`@/${route_data[index][i]}`), // component:(resolve) => require([`@/views/${route_data[index][i]}`], resolve), //加载后端json描述的vue文件 meta: { //路由一些附加信息 show_site: route_data[index][i]_site, //是否全屏显示 web_title: route_data[index][i]_title //网站标题 } }; } } else { //没有children时生成路由数组方法 init_route_data[index] = { path: route_data[index], //路由url name: route_data[index], //路由名 component: () => import(`@/${route_data[index]}`), // component:(resolve) => require([`@/views/${route_data[index]}`], resolve), //加载后端json描述的vue文件 meta: { show_site: route_data[index]_site, //是否全屏显示 web_title: route_data[index]_title //网站标题 } }; // (index); } } // (init_route_data); //打印生成初始化路由数组 for (let index = 0; index < route_; index++) { //由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加 this.$(init_route_data[index]); //循环添加数组 } _menu(); //执行菜单生成方法 }, 其他三个你可以随意修改 在vue2动态路由项目之中，在文件mounted方法中调用路由生成方法，可以实现刷新路由防丢失，但是在vue3中采用同样方式，则会出现异常，原因是我们跳转发生在路由添加前，所以会出现刷新后页面没有内容，所以我们在unitui文件夹下新建init_写下和文件中路由初始化相似的内容，然后再中引入。 init_内容： import router from @/router function init_route() { //依据后端返回的json数据生成路由 if ((route_data) != null) { const route_data = ((route_data)); // (route_data); const init_route_data = []; //定义一个路由数组储存生成的路由信息 for (let index = 0; index < route_; index++) { //循环后端返回的json //循环 if (route_data[index] != undefined) { //有children时生成路由数组方法 init_route_data[index] = { path: route_data[index], //路由url name: route_data[index], //路由名 component: () => import(`@/${route_data[index]}`), // component: (resolve) => require([`@/views/${route_data[index]}`], resolve), //加载后端json描述的vue文件 meta: { //路由一些附加信息 show_site: route_data[index]_site, //是否全屏显示 web_title: route_data[index]_title //网站标题 }, children: [] //嵌套路由 }; for (let i = 0; i < route_data[index]; i++) { init_route_data[index][i] = { path: route_data[index][i], //路由url name: route_data[index][i], //路由名 component: () => import(`@/${route_data[index][i]}`), // component:(resolve) => require([`@/views/${route_data[index][i]}`], resolve), //加载后端json描述的vue文件 meta: { //路由一些附加信息 show_site: route_data[index][i]_site, //是否全屏显示 web_title: route_data[index][i]_title //网站标题 } }; } } else { //没有children时生成路由数组方法 init_route_data[index] = { path: route_data[index], //路由url name: route_data[index], //路由名 component: () => import(`@/${route_data[index]}`), // component:(resolve) => require([`@/views/${route_data[index]}`], resolve), //加载后端json描述的vue文件 meta: { show_site: route_data[index]_site, //是否全屏显示 web_title: route_data[index]_title //网站标题 } }; // (index); } } // (init_route_data); //打印生成初始化路由数组 for (let index = 0; index < route_; index++) { //由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加 (init_route_data[index]); //循环添加数组 } // 这里放置刷新 // (app); // const index=(#) // const url=(index+1,); // this.$(url) } } init_route() 在中引用： import @/unitui/init_//这是为了实现防止刷新路由丢失 此时便可完成刷新自动初始化 我们通过在文件中通过获取路由中meta. show_site的值（0全屏显示，1显示在视图内），然后使用 v-if控制不同router-view的显示来实现显示位置的控制。 源码：1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ 文件中style部分改为： #sub_admin_back { width: 100%; /* 非ui框架将height写为height: 100vh; */ height: 100vh; background-size: cover; position: relative; background-color: #ffffff; border-radius: 10px; } 1、没能尽可能减少对框架的干扰，你仍然需要保持对的适当修改。