Jeecg j-ellipsis 列表字段内容缩略,鼠标放上去显示全部

2 篇文章 0 订阅
1 篇文章 0 订阅

HTML部分:

scopedSlots: {customRender: 'situation'},

在这里插入图片描述
通常使用已经封装好的组件j-ellipsis

import JEllipsis from '@/components/jeecg/JEllipsis'

在这里插入图片描述
封装的封装的HTML内容是:

<template>
  <a-tooltip placement="topLeft">
    <template slot="title">
      <span>{{value}}</span>
    </template>
    {{ value | ellipsis(length) }}
  </a-tooltip>
</template>

如果想要改变其颜色,可以直接把封装的HTML拿出来

<template slot="situation" slot-scope="text, record, index">
  <a-tooltip placement="top" overlayClassName="bgc_tooltip">
    <template slot="title">
    	<span>{{text}}</span>
    </template>
    {{ text | ellipsis(20) }}
  </a-tooltip>
</template>

css样式:

  .bgc_tooltip{
    .ant-tooltip-inner{
      color: #333333;
      background-color: #ffffff!important;
    }
    .ant-tooltip-arrow:before{
      background-color: #ffffff!important;
    }
  }

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值