ant design of vue中表格列内容过长，需要截取并且鼠标滑过悬浮显示全部内容

项目开发中，总会遇到点七七八八的问题，ant design中table表格每一列内容过长需要截取，接下来我捋一下
首先初始界面展示：

因为这行内容过长了，导致我整个表格数据都不能完整的展示出来，如果我只去截取，那剩下的内容我想看，但是看不到呀，所以我就想办法进行截取并且鼠标滑上去的话进行展示全部，完美。

代码如下：

   const columns = [{title: '姓名',dataIndex: 'Name',key: 'name',width: 120,scopedSlots: { customRender: 'titleShow' },},]

相当于给表格中需要操作的一列定义了具名插槽。
接下来我们需要操作：

<table  动态获取表格数据的代码><div class="LeaveOut" :title="text"   slot="titleShow" slot-scope="text, record"><div :style="{textAlign:'left'}">{{text}}</div>    //鼠标滑上去显示全部内容 </div></a-table>

设置完之后，还需要对样式进行操作

 .LeaveOut{overflow: hidden;      /* 隐藏溢出*/height: 25px; width: 53px;}

ant design of vue中表格列内容过长，需要截取并且鼠标滑过悬浮显示全部内容相关推荐

Ant Design of Vue中a-form-model多行表单对齐和验证
表单是前端人员不得不面对的一个组件,如何画的对齐好看,验证成功呢? 1.代码: (1)布局: html+css,当然肯定使用ant的组件注意:单位我们放在suffix里面,如suffix=" ...
Ant Design of Vue 中日期时间控件禁止选中的（日期——）设置
实现控件新建活动限制开始时间必须大于当前时间20分钟 html<a-range-picker:class="{'has-error':startHasError || endtH ...
html鼠标滑动显示内容,CSS DIV 怎样做出来鼠标移动上就显示其内容?
复制下面的代码放到html文件保存就实现了. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org ...
使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目创建项目选择配置运行项目安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开配置 ...

ant design of vue中表格列内容过长，需要截取并且鼠标滑过悬浮显示全部内容

ant design of vue中表格列内容过长，需要截取并且鼠标滑过悬浮显示全部内容相关推荐

最新文章

热门文章