antdv中table组件 scopedSlots 和 ellipsis 属性一起使用，悬浮框失效问题

最新推荐文章于 2024-09-25 17:58:10 发布

qq_42067121

最新推荐文章于 2024-09-25 17:58:10 发布

阅读量4k

点赞数 9

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42067121/article/details/118080332

版权

本文档介绍了在Ant Design Vue(Antdv)中处理表格单元格内容溢出并实现鼠标悬停显示全部内容的方法。通过使用`ellipsis`属性和`scopedSlots`进行自定义渲染，遇到的问题是`scopedSlots`导致悬浮框不显示。解决方案包括使用`a-tooltip`组件创建自定义悬浮框和利用`title`属性修复悬浮框显示。通过调整代码，成功实现了与组件默认样式一致的悬浮效果。

摘要由CSDN通过智能技术生成

一、想要实现的效果，

单元格溢出显示省略号，鼠标移入显示全部（如下图）
在这里插入图片描述

1、功能实现：

溢出显示省略号，鼠标移入出现悬浮框，这两个功能其实很容易实现，antdv已经有现成属性 ellipsis 。

	  {
          title: '申请人',
          dataIndex: 'applicant_cn',
          key: 'applicant_cn',
          ellipsis: true,
        },

2、出现的问题：

（1）当后端的数据和页面展示数据保持一致时，不会有问题；
（2）当数据需要经过计算或者转换再进行展示时，需要用到scopedSlots 这个属性，
例如：申请日期需要转换成年-月-日的格式

        {
          title: '申请日期',
          dataIndex: 'apply_day',
          key: 'apply_day',
          ellipsis: true,
          scopedSlots: { customRender: 'apply_day' },
        },

  <a-table :columns="tmColumns" :data-source="similarNameData" >
   <span  slot="apply_day" slot-scope="text, record">
      <span>
        {{$moment((record.apply_day)*1000).format('YYYY-MM-DD')}}
      </span>
    </span>
  </a-table>

此时的鼠标移入悬浮框就不出现了…

二、思路

1、 a-tooltip 组件

使用 a-tooltip 组件，自己实现一个悬浮框。代码如下，可以解决问题，
但是有个问题，样式和组件自带的样式不同，如果想要都保持一致，就要把表格中所有属性都要按如下格式写一遍，比较麻烦。

       <span  slot="applicant_cn" slot-scope="text, record">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{record.applicant_cn}}</span>
            </template>
            {{record.applicant_cn}}
            </a-tooltip>
          </span>

2、 title属性

在这里插入图片描述
发现可以正常显示悬浮框的单元格，比不显示的多一个title属性，

	<span  slot="apply_day" slot-scope="text, record">
		 <span :title="$moment((record.apply_day)*1000).format('YYYY-MM-DD')">  
		      {{$moment((record.apply_day)*1000).format('YYYY-MM-DD')}}
		  </span>
	 </span>