Ant Design表格fixed与ellipsis同时使用失效解决办法

问题描述

今天遇到一个开始我以为很奇怪的问题，就是一个table表格第一列我使用了fixed，也使用了ellipsis，就是固定首列，然后内容超过就省略的属性。可是我本地环境的数据的首列的内容都很短，都没有超出的情况，但是当去测试环境1就是首列有内容很长的数据，然后导致第二列没有显示，我又去测试环境2看了显示就是正确的，当时就怀疑难道是环境的的问题。然后就想着是不是内容过长导致的，这个我也加了省略溢出的属性，怎么没有起作用呢，后来我就在本地制作了一条首列内容很长的数据，问题就出现了，第二列的数据没显示，首列的内容也没有省略。我就去修改去掉了fixed，ellipsis就可以起作用了。确定了就是这因为两个同时使用导致。

问题解决

ant design vue表格中有提供自定义表格内容的api，根据api插槽自定义内容标签，然后给标签添加类名，类名样式宽度，按照你设定好的表格列宽度进行即可，内容溢出的css样式就三行

columns ： [
  { title: 'Full Name', width: 100, dataIndex: 'name',ellipsis：true, 
   key: 'name', fixed: 'left', customRender:text=>{
     return( //这里就是模板语法，很重要哦
       <a-tooltip placement="topLeft" title={text} >
        <template slot="title">
          <span>{text}</span>
        </template>
        <span class="ellipsis">{text}</span>
       </a-tooltip>
       )
   }
  },
  { title: 'Age', width: 100, dataIndex: 'age', ellipsis：true,key: 'age', fixed: 'left' },
  { title: 'Column 1',ellipsis：true, dataIndex: 'address', key: '1' },
  { title: 'Column 2', ellipsis：true,dataIndex: 'address', key: '2' },
  { title: 'Column 3', ellipsis：true,dataIndex: 'address', key: '3' },
  { title: 'Column 4', ellipsis：true,dataIndex: 'address', key: '4' },
  { title: 'Column 5', ellipsis：true,dataIndex: 'address', key: '5' },
  { title: 'Column 6', ellipsis：true,dataIndex: 'address', key: '6' },
  { title: 'Column 7', ellipsis：true,dataIndex: 'address', key: '7' },
  { title: 'Column 8', ellipsis：true,dataIndex: 'address', key: '8' },

  <style lang="less" scoped>
    .ellipsis{
  		display:block;
      width:100px;
  		text-overflow:ellipsis;
  		white-space:nowrap;
  		overflow:hidden;
    }
  </style>

宽度是一定要设置的，要不然后内容溢出的效果实现不出来，

这样就可以实现显示内容溢出限制了，我这里添加了tooltip信息悬浮提示