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>

 

posted @ 2022-07-10 15:30  我就尝一口  阅读(1826)  评论(0编辑  收藏  举报