首页 > 其他分享 >naiveui | 数据表格超长文字省略处理

naiveui | 数据表格超长文字省略处理

时间:2023-08-29 13:34:31浏览次数:47  
标签:uie naiveui 自定义 content 超长 trigger ellipsis 省略

一、设置 ellipsis

使用数据表格Data Table组件的省略设置 ellipsis,但是如果内容过长的情况下,会溢出

  const textColumns =  {
      key: 'uie_content',
      title: '文本',
      ellipsis: {
        tooltip: true,
      },
    },

naive-data-table.gif

二、自定义省略内容的宽度

使用 弹出信息Popover组件,自定义省略内容的宽度

 {
      key: 'uie_content',
      title: '文本',
      render(rowData, rowIndex) {
        return h(
          NPopover,
          {
            placement: 'top',
            // width: 'trigger', //设定 `width="trigger"` 使 popover 的宽度等于触发元素。
            contentStyle: {
              maxWidth: '600px', //自定义宽度
            },
          },
          {
            trigger: () =>
              h(
                'p',
                {
                  class: 'truncate w-full',
                },
                {
                  default: () => rowData.uie_content,
                }
              ),
            default: () => h('p', {}, { default: () => rowData.uie_content }),
          }
        )
      },
    },

naive-data-table2.gif

标签:uie,naiveui,自定义,content,超长,trigger,ellipsis,省略
From: https://www.cnblogs.com/yangyukeke/p/17664501.html

相关文章

  • 为什么@Autowired写在属性上方进行依赖注入时,可以省略setter方法?
    众所周知,spring的依赖注入方式有两种,setter方法注入和构造器注入。但是在实际开发中,即便类的属性没有setter方法,类也没有构造器,只要在属性的上方添加@Autowired注解,这个类属性依然会被自动注入,那么到底是为什么呢?经过上网查询发现,spring其实是从容器查找符合属性类型的对象,通过......
  • Echarts--x轴文本过长,设置超出隐藏显示省略号,鼠标悬浮上显示全部
     <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>Document</title></h......
  • css单行垂直居中,超过两行显示省略号
    HTML:<div><span>单行居中,多行居左单行居中,多行居左</span></div><div><span>单行居中</span></div>CSS:span{font-size:14px;overflow:hidden;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;disp......
  • Oracle数据库经纬度坐标查询优化与结果错误原因分析、SQL中WKT超长文本字符串处理
    目录一、Oracle几何空间数据对象和其他数据库的差异二、Oracle查询一个经纬度坐标是否在边界内部2.1查询条件2.2查询结果错误,似乎是仅做了MBR匹配2.3错误原因2.4解决办法三、SQL中WKT超长文本在Oracle中如何编写3.1Oracle中执行含超长文本的SQL报错3.2使用CLOB无限拼接得到......
  • CSS如何使文本溢出部分显示省略号?多行超出
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS如何使文本溢出部分显示省略号?多行超出</title><style>*{margin:0px;padding:0px;}.box{w......
  • LVS专访阿里云席明贤,从视频云2.0到“数能生智”的超长畅谈
    这是一篇人物专访,源自LiveVideoStack与阿里云视频云负责人席明贤(花名右贤)的对话。面对风云变幻的内外环境,阿里云在视频云赛道是坚定向前的,右贤没有回避多媒体当下行业面临的困难以及业务面临的挑战,作为多媒体圈的新人,他用了很多时间调研了解市场和客户,他坚定地选择ToB作为突破口,......
  • 使用css样式完成文本超出的部分用省略号代替
    <p>使用css样式完成文本超出的部分用省略号代替</p>第一步要设置宽度,然后使用text-overflow:ellipsis等属性组合使用li{width:140px;background-color:red;overflow:hidden;/*溢出隐藏*/white-s......
  • CSS超出溢出显示省略号
    作用:为了避免文本文字内容超出一定宽度后溢出,我们想要溢出的部分不显示但用省略号(...)显示使用:overflow与text-overflow顺序不能改换强制不换行:white-space:nowrap将行无素换成块元素[单独占一行]:dispaly:block.acli{  display:block;  float:left;  width:10%;......
  • Go语言中省略号用法大全
    Go语言中的ellipsis(即三个连续的点...)确实有几种用途。下面是这些用途的总结:定义变参函数(VariadicFunctions):Ellipsis用于函数定义时,表明该函数可以接受任意数量的参数。这些参数会被当作一个slice来处理。例如:funcsum(nums...int)int{total:=0for_,......
  • css超出隐藏、显示省略号
     超出一行隐藏:overflow:hidden;//超出的文本隐藏text-overflow:ellipsis;//溢出用省略号显示white-space:nowrap;//溢出不换行 __________________________________________________________________________________________________________________________......