element-ui 使用时的奇淫巧技

1、el-table 的表格cell, 开启全局的toolTip提示？

2、el-dialog禁止点击任意空白处关闭弹窗（默认是dialog是开启这个功能的）？

答：
对（1），局部的某个组件文件中, 在el-table-column标签中配置show-overflow-tooltip可以实现提示，但就是太麻烦了
对（2）， 局部的某个组件文件中， 可以在el-dialog中，增加属性 :close-on-click-modal="false" 实现, 但一个个加也太麻烦了

这双眼睛看透了一切~

哈哈，那就动手实现吧，全局设置上述功能！在main.js里这么写：

//......
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css
//......

// 默认开启悬浮提示样式，定义FitTable 扩展table的样式
ElementUI.TableColumn.props.showOverflowTooltip= {type:Boolean, default: true};
//全局修改默认配置，点击空白处不能关闭弹窗
ElementUI.Dialog.props.closeOnClickModal.default = false

3、希望el-table 有这样的功能，table-column组件的属性show-overflow-tooltip是否能同时在对应表头生效?

如下显示：

图片

答：

• 如果是对于个别组件文件，实现该效果，即 百度 查询 element-ui table renderHeader 实现即可
• 对于已经写了很多文件来说，要想统一实现该效果，有没有方法？哈哈，答案是有的，不然我怎么截图出来! 接下来需要这几步，就可以实现！

写法1，可实现功能，控制台会报warning。（不介意该点，可采取此法）

1. 在你项目的某个目录(比如utils)下，新建一个table-column.js, 作用: 继承el-table-column的功能，但是在它上面又进行自己的扩展！

table-column.js， 这里采用了vue jsx的写法，要注意几点，
第一，项目的element-ui 版本，其中的table是否已经支持renderHeader ,
第二，看你的项目是否支持vue jsx, 如何支持请自行百度。不支持的话，乖乖的动态写render方法哦~

import { TableColumn } from 'element-ui'

export default {
  name: 'ElTableColumn',
  extends: TableColumn,  // 继承本来的TableColumn 功能
  props: {
    // 使用 renderHeader 方法，设置默认的table-column 表头渲染，当字体超过7个字时(文字出现超出的省略号)，悬浮显示toolTip,
    // 采用jsx 语法进行书写
    renderHeader: {
      type: Function,
      default: (h, { column }) => {
        const { label } = column;
        if(label) {
          const len = label.length;
          return len > 7 ? 
              {label}
            
            : { label }
        }
        return { label };
      }
    }
  },
}

2. 在main.js中，引入这个文件，并且全局注册该组件，覆盖原来的ElTableColumn，

import FitTableColumn from '@/utils/table-column'
Vue.component('ElTableColumn' || FitTableColumn.name, FitTableColumn)

配置好上述2点，热更新代码后，效果就有啦~

但 控制台报warning这个：[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header. 。。。看着就很不爽呀，后来查阅了几天，发现renderHeader不放在props里书写，放在mounted 方法里书写，控制台就不报warning了,而且上述代码也限制的比较死，大于7个的时候，设定了固定长度100px,超出部分出现省略号，体验不好。

写法2， 实现功能，不报warning，比较完美实现

默认情况下，未对element-ui 的table的th设置样式，当字数超了的时候，会自动换行，就像这样：

image.png

那现在不想要自动换行呢，想要超出出现省略号？很简单，为你的el-table设置class名为admin_table,
再为th设置一行这样的css

.admin_table  th>.cell{
  white-space: nowrap;
} 

设置完毕后，就会像这样：

image.png

添加tool-tip? utils文件夹下，新建一个table-column的js文件，代码如下：

import { TableColumn } from 'element-ui'

export default {
  name: 'ElTableColumn',
  extends: TableColumn, // 继承TableColumn
  mounted() {
    // 设置默认的table-column 表头渲染，判断当出现省略号时el.offsetWidth < el.scrollWidth， 悬浮显示toolTip,
    // 采用jsx 语法进行书写, 放在mounted方法中
    this.columnConfig.renderHeader = (h, { column }) => {
          const { label, id } = column;
          const el = document.querySelector(`.${id} .cell`);
          const eleWidth = el && el.offsetWidth ;
          if(el && (eleWidth < el.scrollWidth)) { // 表示超出了，有省略号出现
            return (
              {label}
            );
          }else{
            return { label };
          }
     }
  }
}

最后，同样的 在main.js中，引入这个文件，并且全局注册该组件，覆盖原来的ElTableColumn，

import FitTableColumn from '@/utils/table-column'
Vue.component('ElTableColumn' || FitTableColumn.name, FitTableColumn)

刷新页面，则所有的table表头，当显示出现省略号时，鼠标悬浮上去都有了tool-tip功能(๑¯∀¯๑)