首页 > 其他 > 详细

antd 列内省略号

时间:2019-11-21 16:04:50      阅读:334      评论:0      收藏:0      [点我收藏+]

 

<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

 

antd 列内省略号

原文:https://www.cnblogs.com/dhjy123/p/11905855.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!