antdv 的 Table表格 碰到的问题
table表格中同时使用fixed和ellipsis会造成固定列的内容溢出宽度时,会直接撑开设定的宽度,ellipsis不生效。
并且每一列的ellipsis设置都将不起作用,固定列撑开的宽度会覆盖没有设置固定列的表头,
- 方法
根据api插槽自定义内容标签,然后给标签添加类名,
内容溢出的css样式 三行
columns中还是要设置宽度的
代码:
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
class="j-table-force-nowrap"
:scroll="{x:true}"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item>
<a @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
<!-- 主要代码在这里 -- 下面这些 -->
<span slot="bzbz" slot-scope="text, record">
<a-tooltip placement="top">
<template slot="title">
<span>{{ text }}</span>
</template>
<span class="ellipsis">{{ text }}</span>
</a-tooltip>
</span>
</a-table>
columns代码:scopedSlots 这一句
{
title:'培训原因',
align:"center",
width:147,
dataIndex: 'trainReason',
scopedSlots: { customRender: 'bzbz' },
},
css样式:
.ellipsis{
display:block;
width:150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}