vue iview table Tooltip内容过多闪屏解决

vue的项目，框架是iview

 客户反应，指令描述的内容有几百个字，鼠标悬浮，浏览器开始闪烁

解决思路是加宽度限制，滚动，

后面发现像是transfer属性的bug，触碰浏览器底部，距离不够造成

做一个全局封装

在src/system/utils/  新建一个system.js文件

// 封装表格tooltip闪屏的处理  参数是 render: (h, params) => {}   例： content = params.row.original_info 

const renderTooltip = (h, params, content) => {

  const isTopPlacement = [0, 1, 2, 3].includes(params.row._index);

  const contentStyle = {

    whiteSpace: "normal",

    wordWrap: "break-word",

    maxHeight: "150px",

    overflow: "auto"

  };

  const tooltipProps = {

    props: {

      placement: isTopPlacement ? "bottom" : "top",

      transfer: isTopPlacement ? true : false

    },

    style: {

      width: "100%"

    }

  };

  let tooltipContent = null;

  if (content) {

    tooltipContent = [

      h("div", {

        style: {

          overflow: "hidden",

          textOverflow: "ellipsis",

          whiteSpace: "nowrap"

        }

      }, content),

      h("div", {

        slot: "content",

        style: contentStyle

      }, content)

    ];

  }

  return h("div", {}, [

    tooltipContent && h("Tooltip", tooltipProps, tooltipContent)

  ]);

}

export default {

  renderTooltip,

}

 

在src/util/   新建一个index.js文件

import systemUtil from '@/system/utils/system'

export default {

  $renderTooltip: systemUtil.renderTooltip  // 封装表格tooltip闪屏的处理 

}

main.js中导入

import util from '@/util/index'

Vue.prototype.$util = util // 将公共方法挂在到vue原型链上

在页面引入

 

{

            title: '指令描述', key: 'instructionDesc', align: 'center', minWidth: 120, ellipsis: true, tooltip: true,

            render: function (h, params) {

              return ths.$util.$renderTooltip(h, params, params.row.instructionDesc)

            }

          },