antd 列内省略号

 

<span slot="remark" slot-scope="text, record">
   <a-tooltip placement="top" v-if="record.remark.length > 12">
      <template slot="title"><span>{{ record.remark }}</span></template>
      <span class="remark-col">{{ record.remark === '' ? '-' : record.remark }}</span>
    </a-tooltip>
    <span v-else class="remark-col">{{ record.remark === '' ? '-' : record.remark }}</span>
</span>

  {
    title: '备注',
    dataIndex: 'remark',
    align: 'center',
    // width: '10%',
    // customRender: (value, row, index) => {
    //   return value === '' ? '-' : value
    // }
    scopedSlots: { customRender: 'remark' }
  },

 

<style lang="less">

.contentMgmt {
  .remark-col {
    // width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100px;
  }
}
@media screen and (min-width: 1450px) {
  .contentMgmt .remark-col {
    max-width: 150px;
  }
}
</style>

1