a-table设置滚动条以及数据内容过多省略号显示鼠标悬浮显示全部内容

25G

已于 2023-07-17 16:46:20 修改

阅读量5k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-04-20 18:11:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48907405/article/details/130272657

版权

文章讲述了如何在Vue组件a-table中设置滚动条，并处理内容过多时的行高撑开问题，采用样式控制实现内容省略和悬浮显示，同时展示了如何通过插槽添加title属性来展示完整内容。涉及到的特性包括动态渲染数据、列宽控制、自定义列模板等。

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

a-table是动态渲染数据的一个表格标签

滚动条：

<a-table :scroll="{x: '100%', y: '400px'}"></a-table>

也可以在样式中设置数据没有超过最大高度的时候不会显示滚动条

style="max-height: 250px;overflow-y: auto;"

内容过多就会导致行高撑开那么在样式里面添加以下几项（溢出内容省略号显示）

:not(:last-child)样式排除最后一列（操作按钮不需要做内容省略操作）

.table-wrap /deep/ .ant-table-tbody > tr > td :not(:last-child){
    height: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    content:attr(data-title);
    padding: 12px 16px;
}

vue组件的label文字超出省略显示

    width: 102px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

给动态渲染的数据做一个插槽添加title属性进行鼠标悬浮显示文字

:columns="columns" 每列信息

:data-source="data" 数据来源

:row-selection="rowSelection" 复选框

:selectedRowKeys="selectedRowKeys" 关键词列表

:pagination="pagination" 分页

:scroll="{x: '100%', y: '400px'}" 滚动条

<a-table :columns="columns" :data-source="data" :row-selection="rowSelection" :selectedRowKeys="selectedRowKeys" :pagination="pagination" :scroll="{x: '100%', y: '400px'}">
    <template slot="operation" slot-scope="text,record">
        <a @click="方法(record)" style="margin-right:16px;color:#f68f6e">关联固件 <img src="../../../public/img/关联固件.svg" alt="" style="width: 14px;height: 13px;transform: translateY(-2px);" ></a>
        <a @click="方法(record)" style="margin-right:16px;color:#2ab62b">上传poc <img src="../../../public/img/上传.svg" alt="" style="width: 14px;height: 13px;transform: translateY(-2px);" ></a>
        <a @click="方法(record)"  style="color:#1890FF">查看poc <img src="../../../public/img/搜索或查看.svg" alt="" style="width: 13px;height: 13px;transform: translateY(-2px);" ></a>
    </template>
    <template slot="severity" slot-scope="text,record">
       <a-tag color="#cd201f" v-if="text==1">高</a-tag>
       <a-tag color="#f68f6e" v-else-if="text==2">中</a-tag>
       <a-tag color="#f7c870" v-else-if="text==3">低</a-tag>
       <a-tag color="#68b1d2" v-else>未知</a-tag>
    </template>
    <template slot="mode" slot-scope="text,record">
       <td  v-if="text==1">手动上传</td>
       <td  v-else-if="text==2">检测发现</td>
    </template>
    <template slot="downloadUrl" slot-scope="text,record">
        <a href="text" :title="text">{{text}}</a>
    </template>
    <template slot="details" slot-scope="text,record">
      <p :title="text">{{text}}</p>
    </template>
    <template slot="tags" slot-scope="text,record">
      <p :title="text">{{text}}</p>
    </template>
</a-table>

添加插槽关系

columns:[
    {
        title: '详细信息',
        dataIndex: 'details',
        align: 'center',
        scopedSlots: { customRender: 'details' },
    },
    {
        title: '严重程度',
        dataIndex: 'exposure',
        align: 'center',
        scopedSlots: { customRender: 'severity' },
    },
    {
        title: '范围',
        dataIndex: 'tags',
        align: 'center',
      scopedSlots: { customRender: 'tags' },
    },
    {
        title: '地址',
        dataIndex: 'downloadUrl',
        align: 'center',
        scopedSlots: { customRender: 'downloadUrl' },
    },
    {
        title: '来源',
        dataIndex: 'mode',
        align: 'center',
        scopedSlots: { customRender: 'mode' },
    },
    {
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        scopedSlots: { customRender: 'operation' },
    },
]

省略跟鼠标悬浮显示全部内容最简单粗暴的方法直接在columns中要省略的列添加ellipsis: true

如下：

title: '详细信息',
dataIndex: 'details',
align: 'center',
ellipsis: true,
width: 100

span标签

<span style="  display: inline-block;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :title="item.firmwareName">{{item.firmwareName}}</span>