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;
  }

你可能感兴趣的:(antdv,vue.js)