antd vue table ellipsis属性不生效

已于 2022-04-28 09:27:33 修改
阅读量3.9k 收藏 2
点赞数 1
分类专栏： Vue ant-design-vue问题记录 文章标签： 前端
于 2022-04-27 17:23:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Admin_yws/article/details/124456034
版权 
//ellipsis: true不生效代码
  <a-tooltip
        slot="status"
        slot-scope="text"
        placement="top"
        :title="text"
        :arrow-point-at-center="true"
      >
        <div>{{ text }}</div>
      </a-tooltip>

//将div改为span ellipsis: true生效
  <a-tooltip
        slot="status"
        slot-scope="text"
        placement="top"
        :title="text"
        :arrow-point-at-center="true"
      >
        <span>{{ text }}</span>
      </a-tooltip>

造成原因不明，有大佬了解吗？欢迎评论

新津之虎--曹达华
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于使用 ant-design-vue a-table 超出部分 隐藏并显示省略号
冰魂魄的博客
04-01 1万+
如果只是对于超出隐藏 可以直接使用ellipsis 进行设置，方便快捷 columns = [ { id: "1", checked:true, width: 100, title: '更新时间', dataIndex: 'update_at', ellipsis: true, } ] 但有的时候 title的hover显示效果 满足不了我们的需求 ， 要求我们使用类似于tooltip的形式 对省略的字段进行显示 代码如下： columns = [ { i...
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
antd中使用Table组件,设置ellipsis: true后；结果宽度不起作用原因：超长连续字段（长数字和长单词） 破坏表格布局的问题（即使你指定了列的宽度也会被挤开），
dggggggx的博客
11-02 1993
antd中使用Table组件,设置ellipsis: true后；结果宽度不起作用原因：超长连续字段（长数字和长单词） 破坏表格布局的问题（即使你指定了列的宽度也会被挤开），
antd记录table组件,包含(行复选属性设置，斑马色，ellipsis导致文本隐藏，scroll列错乱，tbody滚动条样式)
最新发布
jyl919221lc的博客
04-23 235
【代码】antd记录table组件,包含(行复选属性设置，斑马色，ellipsis导致文本隐藏，scroll列错乱，tbody滚动条样式)
antdv ellipsis 没有作用
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
05-20 4647
antdv 的 Table表格 碰到的问题 table表格中同时使用fixed和ellipsis会造成固定列的内容溢出宽度时，会直接撑开设定的宽度，ellipsis不生效。 并且每一列的ellipsis设置都将不起作用，固定列撑开的宽度会覆盖没有设置固定列的表头， 方法 根据api插槽自定义内容标签，然后给标签添加类名， 内容溢出的css样式 三行 columns中还是要设置宽度的 代码： <a-table ref="table" size="middle"
antd中使用Table组件,设置ellipsis: true后；结果宽度不起作用了
Fs670267542的博客
03-21 4894
我设置width应该是这么宽,结果设置了 ellipsis: true 后,这个宽度就不生效了,被内容撑开了 解决办法:onCell: () => { return { style: { maxWidth: 160, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow:'ellipsis', cursor:'po...
Ant Design表格fixed与ellipsis同时使用失效解决办法
qq_38948398的博客
10-16 4071
使用Ant Design的Table表格遇到的问题 table表格同时使用fixed和ellipsis会造成固定列的内容溢出宽度时，会直接撑开设定的宽度，ellipsis不生效 且每一列的ellipsis设置都将不起作用，固定列撑开的宽度会覆盖没有设置固定列的表头， 因为时间不多，就不将造成的示例敲出来贴出来贴图了，我这里就讲下解决方法 antdesign表格中有提供自定义表格内容的api，根据api插槽自定义内容标签，然后给标签添加类名， 类名样式宽度，按照你设定好的表格列宽度进行即可，内容溢出
vue2a-table的ellipsis: true,属性不生效
m0_65360496的博客
04-12 357
vue2a-table的ellipsis: true,属性不生效解决方法
关于VUE使用antD table组件设置fixed和ellipsis无效问题
三包酸奶！的博客
10-26 2772
创建新的less文件(需要在组件中引入该less文件)或在antD设置全局样式的less文件中添加如下样式： .ant-table-fixed-left table,.ant-table-fixed-right-right table{ width:min-content; }
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
前边不显示+，并且详细信息默认展开 在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //...
vue3+vite+antd 后台管理系统基础模板
02-06
它集成了Vue3的最新特性、Vite的高效开发环境以及Antd的UI组件，为开发者提供了一个稳定且高效的开发平台。 `.env.development` 和 `.env.production` 文件是用来配置不同环境下的变量，如API地址、环境标志等，...
antd Design Table二次封装
04-26
阿里出品的Ant Design UI组件用起来可以说是很顺手的，但是用多了会发现有时候还能更高效一点，那么我就萌生了对个别组件...没积分的可以去git上下载：https://gitee.com/jsicu/react-antdTable-secondEncapsulation
ellipsis在table里失效
两只鱼，鱼鱼鱼鱼鱼
07-05 2834
问题：display：table，或者table标签布局之后，设置td（table-cell）文字溢出隐藏ellipsis失效 解决方法： 在table（display：table）的css样式中设置:table-layout:fixed; 在table td 的css样式中设置：overflow:hidden;text-overflow:ellipsis;即可 出现频率太高，遗忘太快。 ...
设置width不生效_Ant Design Table ellipsis和fixed 共同作用不生效
weixin_39634237的博客
11-30 2201
需求：在开发过程中我们会遇到这样的需求，表格需要展示的内容过多，需要固定一部分字段，同时需要在固定的字段里面内容超出自适应屏幕 并且显示... 省略开发实现代码antd Table 中有ellipsis和fixed两个字段可以满足这类需求但是实际实现效果确实有点问题 ‘延期至’ 这个字段是实现有问题的 而且ellipsis 这个属性也没有生效 文字超乎文本 将‘延期至’这个字段给挡住了。3. 解决...
antdv中table组件 scopedSlots 和 ellipsis 属性一起使用，悬浮框失效问题
qq_42067121的博客
06-21 3831
一、想要实现的效果， 单元格溢出显示省略号，鼠标移入显示全部（如下图） 1、功能实现： 溢出显示省略号，鼠标移入出现悬浮框，这两个功能其实很容易实现，antdv已经有现成属性 ellipsis 。 { title: '申请人', dataIndex: 'applicant_cn', key: 'applicant_cn', ellipsis: true, }, 2、 出现的问题： （1）当后端的数据和页
5. 【原创】table设置text-overflow: ellipsis;（超出范围显示...）不生效
disheng1504的博客
06-26 596
最近写的页面中，想让table中的td内容超出文本之后显示'...',但是使用text-overflow: elipsis;没有生效，后来经过试验才摸索出正确的设置方式。 table { table-layout: fixed;//表格布局：固定 width: 200px; //一点呀设置表格的宽度 } td { white-space: n...
flex 布局下 ellipsis 无法生效的问题
这里是东九凯瑞王
06-11 2068
flex 布局下 ellipsis 无法生效的问题 问题场景 通过 flex + flex-shrink/flex-grow 布局来让元素自适应宽度的情况下，希望通过white-space: nowrap;overflow: hidden;text-overflow: ellipsis;来处理文字过长溢出宽度的情况，但是文字没有被正确省略，而是溢出了容器宽度 解决方案 Stack Overflow...
ant design的table表格columns设置fixed之后ellipsis和width无法生效问题
qq_38432842的博客
08-03 967
ant design组件库使用过程中遇到的问题
antd vue table 封装
05-23
Ant Design 是一个非常流行的 UI 框架，它提供了很多实用的组件，包括 Table 表格组件。在 Vue 项目中使用 Ant Design 的 Table 组件时，可以考虑封装一个通用的 Table 组件，方便在不同的页面中复用。 下面是一个简单的 Ant Design Vue Table 封装： ```vue <template> <a-table :columns="columns" :dataSource="dataSource"> <a-pagination :total="total" :current="current" :pageSize="pageSize" @change="handlePageChange" /> </a-table> </template> <script> import { Table, Pagination } from 'ant-design-vue'; export default { name: 'AntdTable', components: { Table, Pagination }, props: { columns: { type: Array, required: true, }, dataSource: { type: Array, required: true, }, total: { type: Number, required: true, }, current: { type: Number, required: true, }, pageSize: { type: Number, required: true, }, }, methods: { handlePageChange(pageNumber) { this.$emit('page-change', pageNumber); }, }, }; </script> ``` 在这个组件中，我们使用了 Ant Design Vue 提供的 Table 和 Pagination 组件。组件接受了五个 props：columns、dataSource、total、current 和 pageSize，分别对应 Table 组件和 Pagination 组件的属性。在 handlePageChange 方法中，我们触发了一个自定义事件 page-change，这个事件可以在父组件中监听并处理分页请求。 使用这个组件时，只需要传入相应的 props 即可： ```vue <template> <div> <AntdTable :columns="columns" :dataSource="dataSource" :total="total" :current="current" :pageSize="pageSize" @page-change="handlePageChange" /> </div> </template> <script> import AntdTable from '@/components/AntdTable'; export default { components: { AntdTable }, data() { return { columns: [...], dataSource: [...], total: 100, current: 1, pageSize: 10, }; }, methods: { handlePageChange(pageNumber) { console.log('Page changed:', pageNumber); }, }, }; </script> ``` 这样，我们就完成了一个简单的 Ant Design Vue Table 封装。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值