antd-v 中 table 组件 scopedSlots 和 ellipsis 属性一起使用,title属性消失问题
项目中遇到一个问题, 在表格中超长的文字使用 ... 显示,但是鼠标滑过并没有提示语显示全称,和其他列进行对比后发现缺少了 title 属性,原因是这一列使用了 scopedSlots 属性,增加了点击事件。和 ellipsis 属性一起使用,导致 title 属性消失。
只需要在插槽中添加 title 属性即可。
const columns = [
{
title: "序号",
dataIndex: "num",
key: "num",
scopedSlots: { customRender: "num" },
width: 60
},
{
title: "建设项目名称",
dataIndex: "projectName",
key: "projectName",
scopedSlots: { customRender: "projectName" },
ellipsis: true,
}, ...
]
<a-table :columns="columns" :data-source="data" bordered :pagination="false">
<template slot="projectName" slot-scope="text, record">
<a :title="record.projectName" @click="handleView(record)">{{ text }}</a>
</template>
</a-table>
生活是痛苦的白天,死亡是凉爽的夜晚。