zoukankan      html  css  js  c++  java
  • iview+vue 表格任一项实现鼠标划上显示内容

      在新版本的iview中,表格新增了tooltip功能:

      但做项目时并不是新的iview版本,又不想升级,如何才能实现当内容过多鼠标划上显示内容?下边是我做项目时的改动:

     {
              // fixed: 'left',
              title: '编码',
              align: 'center',
              key: 'code',
              minWidth: 150,
              maxWidth: 170,
              ellipsis: true,
              render: (h, params) => {
                return h('Tooltip', {
                    props: { 
                      content:this.data[params.index].code,
                      placement: 'top' 
                    }
                },this.data[params.index].code)
              }
            },
            {
              title: '名称',

      提交之后发现,未显示全部内容,仔细检查发现是内容超出了,与背景颜色相同而不容易看出来:

    于是修改了一下代码:

     {
              // fixed: 'left',
              title: '编码',
              align: 'center',
              key: 'code',
              minWidth: 150,
              maxWidth: 170,
              ellipsis: true,
              render: (h, params) => {
                return h('Tooltip', {
                    props: { placement: 'top' }
                }, [
                  this.data[params.index].code,
                    h('span', { 
                      slot: 'content', 
                      style: {
                         whiteSpace: 'normal',
                          wordBreak: 'break-all' 
                        }
                     },this.data[params.index].code)
                ])
              }
            },
            {
              title: '名称',

    就可以达到目的了(为了节省空间也就不上图了)。

    原因:显示内容超出的是因为tooltip默认为单行显示,通过设置多行显示即可。

    总结:

     在使用iview 的table组件时,要注意render和renderHeader的作用与重要性。

  • 相关阅读:
    视差插件parallarx
    经典幻灯片插件Swiper
    经典全屏滚动插件fullPage.js
    Dialog插件artDialog
    html5 canvas 做的一个时钟效果
    CSS3 Transitions, Transforms和Animation使用简介与应用展示
    微软官方下载地址
    Windows 7 下配置IIS,并且局域网内可访问(转载)
    C# 使用HttpWebRequest 实现文件的上传
    小图标网站
  • 原文地址:https://www.cnblogs.com/wy120/p/9687237.html
Copyright © 2011-2022 走看看