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。（不介意该点，可采取此法）
- 在你项目的某个目录(比如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 ? <el-tooltip class="item" effect="dark" content={label} placement="top">
<span style={{ width: `100px`,display: 'inline-block',overflow: 'hidden',textOverflow: 'ellipsis'}}>{label}</span>
</el-tooltip>
: <span>{ label }</span>
}
return <span>{ label }</span>;
}
}
},
}
- 在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 (<el-tooltip class="item" effect="dark" content={label} placement="top">
<span >{label}</span>
</el-tooltip>);
}else{
return <span>{ label }</span>;
}
}
}
}
最后，同样的 在main.js中，引入这个文件，并且全局注册该组件，覆盖原来的ElTableColumn，
import FitTableColumn from '@/utils/table-column'
Vue.component('ElTableColumn' || FitTableColumn.name, FitTableColumn)
刷新页面，则所有的table表头，当显示出现省略号时，鼠标悬浮上去都有了tool-tip功能(๑¯∀¯๑)
网友评论