antd vue表格某一列文字太多出现省略号并且鼠标悬浮时出现完整内容

最新推荐文章于 2025-02-17 14:52:38 发布

是小芬达啊

最新推荐文章于 2025-02-17 14:52:38 发布

阅读量7.8k

点赞数 5

本文链接：https://blog.youkuaiyun.com/weixin_52921391/article/details/117439307

版权

博客介绍了让文字太长时出现省略号，悬浮时显示完整文字的效果实现。给出了HTML和JS部分代码，HTML部分设置表格插槽及title属性，JS部分设置ellipsis为true以实现文本超出宽度出现省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看一下效果，文字太长出现省略号，悬浮时会有完整的文字

直接贴代码吧

html部分

这里给一个表格的插槽，有一个title的属性，这就是悬浮时有省略号的代码

<a-table :columns="columns2" rowKey="id" :data-source="data2" :pagination="false">
          <span slot="fileName" slot-scope="text">
            <span :title="text">{{ text}}</span>
          </span>
          <span slot="status" slot-scope="text, record">
            <a-badge status="success" />{{ record.successCount }}台成功
            <span style="margin-left: 10px"></span>
            <a-badge status="error" />{{ record.failureCount }}台失败
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="downLoad(record)">下载</a>
            <a-divider type="vertical" />
            <a @click="desc2(record)">查看详情</a>
          </span>
        </a-table>

js部分

设置ellipsis为true，这是能文本超出宽度出现省略号的代码

const columns2 = [
  {
    title: "文件名",
    dataIndex: "fileName",
    width: "20%",
    align: "center",
    scopedSlots: { customRender: "fileName" },
    ellipsis: true,
  },
  {
    title: "发布者",
    dataIndex: "createUserName",
    width: "10%",
    align: "center",
  },
  {
    title: "执行时间",
    dataIndex: "gmtCreate",
    width: "20%",
    align: "center",
  },
  {
    title: "执行状态",
    dataIndex: "status",
    width: "25%",
    align: "center",
    scopedSlots: { customRender: "status" },
  },
  {
    title: "操作",
    dataIndex: "action",
    width: "25%",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
];