如何成功Element-Popover的动静定位-Plus-UI中的El-Vue3疑问 (如何成功开到抑郁证明)
一、需求剖析,疑问形容
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几个属性说明如下:
![如何成功开到抑郁证明](https://tyye.cn/zb_users/theme/tpure/style/images/lazyload.png)
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、没能尽可能减少对框架的干扰,你仍然需要保持对的适当修改。
免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。