ant Vue 表格列多数据溢出省略显示

1.实现下图缩式

 二次更新：通过customRender设置添加悬浮窗，不需要再设置样式，注意动态数据使用的时候是一个大括号

{
          title:'业务分类',
          align:"center",
          dataIndex: 'firstCate',
          key:'firstCate',
          // scopedSlots: { customRender: 'firstSec' },
          customRender:(value, row, index) => {
            let type = row.firstCate? `${row.firstCate}/${row.secCate}`:'运维派单/业务巡检';
            return <a-tooltip>
                        <template slot="title"> {type}</template>
                        {type}
                    </a-tooltip>;
          }
        },

　　

-------------------------------------------------------------------------------------------

scopedSlots实现多文字展示时悬浮弹窗

代码实现过程;

 <div  class="overflowStyle" slot="committeeMember" slot-scope="text, record">
           <a-tooltip :title="record.committeeMember" placement="topLeft">
                {{record.committeeMember}}
            </a-tooltip>
        </div>

　　

 columns: [
          {
            title:'党委委员',
            align:"center",
            dataIndex: 'committeeMember',
            key: 'committeeMember',
            // width:"10%",
            scopedSlots: { customRender: 'committeeMember' }
          }]

　　

/*统一table表格的尺寸*/
.ant-table{
  table-layout: fixed;
}
.ant-table-tbody > tr > td {
  max-width: 200px;
  min-width: 70px;
  height: 70px;
  border-bottom: 0;
  /*text-align: center !important;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
}
 .overflowStyle{
    max-width: 85px !important;
    max-height: 70px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
}