antd vue表格某一列文字太多出现省略号并且鼠标悬浮时出现完整内容
首先看一下效果,文字太长出现省略号,悬浮时会有完整的文字直接贴代码吧html部分这里给一个表格的插槽,有一个title的属性,这就是悬浮时有省略号的代码<a-table :columns="columns2" rowKey="id" :data-source="data2" :pagination="false"><span slot="fileName" slot-scope=
·
首先看一下效果,文字太长出现省略号,悬浮时会有完整的文字
直接贴代码吧
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" },
},
];
更多推荐
已为社区贡献7条内容
所有评论(0)