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


直接贴代码吧

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" },
  },
];
Logo

前往低代码交流专区

更多推荐