element-ui小技巧

1、表格内容超出隐藏鼠标浮上去显示文字提示
如下可以先在el-table-column标签上添加宽度属性再添加show-overflow-tooltip属性

<el-table-column prop="name" label="姓名" width="120" show-overflow-tooltip></el-table-column>

这中文字提示在鼠标浮上去时会自动隐藏，如果想要不隐藏可以自己写一个方法。

2、表格内容需要隐藏一部分，但是鼠标浮上去可以显示完全并选中
这种就不能用show-overflow-tooltip属性了，可以使用formatter自己封装一个方法返回Tooltip组件。
首先字符串隐藏可能是前n位后n位或者中间m~n位，所以需要两个字段确定隐藏位置
其次隐藏的内容需要替换成什么字符串也需要是配置项
然后Tooltip组件的一些参数最好也是添加到配置项中，像placement
思路想好了就可以用代码实现了，具体如下：

import { h } from 'vue';
import { Tooltip } from 'element-ui';

/**
  * 格式化生成隐藏的字符串及tooltip
  * @param {*} cellValue 
  * @param {*} config 
  * start: 开始显示的字符截取位置
  * end: 结束显示的字符截取位置，为负数则截取后面几位
  * padding: 隐藏的字符替换
  * placement: tooltip位置
  * @returns h
*/
  tableFormatterTooltip(cellValue, config = { start: 4, end: -4, padding: '****', placement: 'top' }) {
    if (!cellValue) return '';
    const defaultConfig = { start: 4, end: -4, padding: '****', placement: 'top' };
    let _config = Object.assign(defaultConfig, config);
    return h(Tooltip, {
      props: {
        content: cellValue,
        placement: _config.placement,
      }
    }, [
        h('span', cellValue.substring(0, _config.start) + _config.padding + cellValue.substr(_config.end))
    ])
  }

使用直接在formatter上加上这个方法就行