antdv ellipsis 没有作用

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;
  }
  • 7
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值