Ant表格-文字过多显示省略号，鼠标悬停可以显示全部内容

最新推荐文章于 2024-03-29 17:49:33 发布

小敏子爱看蜡笔小新

最新推荐文章于 2024-03-29 17:49:33 发布

阅读量889

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_58511370/article/details/127648002

版权

    <a-table
        :columns="columns"
        :loading="tableLoading"
        :data-source="data"
        :rowKey="
          (row, index) => {
            return index
          }
        "
        bordered
        :pagination="false"
        :scroll="{ x: 2000 }"
      >
        <template slot="ABB012" slot-scope="text" > // 鼠标悬停显示所有内容的弹框
          <a-tooltip placement="top" :title="text" trigger="hover">
            <div>
              <template slot="title"> </template>
              <p style="cusor:pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 130px;">{{ text }}</p>
            </div>
          </a-tooltip>
        </template>
      </a-table>

let columns = [
 {
    title: '基本案情',
    align: 'center',
    ellipsis: true,     // 显示省略号
    dataIndex: 'ABB012',
    key: 'ABB012',
    scopedSlots: { customRender: 'ABB012' },  //必写
    width: 150
  }
]