el-table单元格内容过多时,使用省略号...

el-table单元格内容过多时,使用省略号,鼠标悬浮时可以显示弹框展示

展示效果:

el-table自带属性tooltip-ellect和:show-overflow-tooltip="true"

 如下示例中的问题内容示例

使用步骤:

1、在el-table中添加 tooltip-effect="light"这个如果不写默认duck,弹框背景是黑色的

2、在el-table-column中添加:show-overflow-tooltip="true",自动超宽带省略号,并且悬浮可提示。

<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange" tooltip-effect="light">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id主键" align="center" prop="questionId" />
      <el-table-column label="问题类型" align="center" prop="questionType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.question_type" :value="scope.row.questionType"/>
        </template>
      </el-table-column>
      <el-table-column label="问题内容" align="center" prop="questionContent"
                       :show-overflow-tooltip="true" >
      </el-table-column>

      <el-table-column label="问题反馈" align="center" prop="questionFeedback" />

    </el-table>

3、轻弹框的默认宽度是100%,如果需要修改框框的宽度

新增style,注意不能使用<style lang="scss" scoped>

自己在下方新增一个<style> 即可

<style >
/*设置el-table轻提示的宽度*/
.el-tooltip__popper {
  max-width: 20%;
}
</style>

小白一枚,如有问题多多指教~

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值