1、el-table 的表格cell, 開(kāi)啟全局的toolTip提示涎嚼？
2轿塔、el-dialog禁止點(diǎn)擊任意空白處關(guān)閉彈窗（默認(rèn)是dialog是開(kāi)啟這個(gè)功能的）？
答：
對(duì)（1）配并，局部的某個(gè)組件文件中, 在el-table-column標(biāo)簽中配置show-overflow-tooltip可以實(shí)現(xiàn)提示，但就是太麻煩了
對(duì)（2）霍转， 局部的某個(gè)組件文件中荐绝， 可以在el-dialog中，增加屬性 :close-on-click-modal="false" 實(shí)現(xiàn), 但一個(gè)個(gè)加也太麻煩了
哈哈避消，那就動(dòng)手實(shí)現(xiàn)吧低滩，全局設(shè)置上述功能！在main.js里這么寫(xiě)：
//......
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css
//......
// 默認(rèn)開(kāi)啟懸浮提示樣式岩喷，定義FitTable 擴(kuò)展table的樣式
ElementUI.TableColumn.props.showOverflowTooltip= {type:Boolean, default: true};
//全局修改默認(rèn)配置恕沫，點(diǎn)擊空白處不能關(guān)閉彈窗
ElementUI.Dialog.props.closeOnClickModal.default = false
3、希望el-table 有這樣的功能纱意，table-column組件的屬性show-overflow-tooltip是否能同時(shí)在對(duì)應(yīng)表頭生效?
如下顯示：
答：
- 如果是對(duì)于個(gè)別組件文件婶溯，實(shí)現(xiàn)該效果，即 百度 查詢 element-ui table renderHeader 實(shí)現(xiàn)即可
- 對(duì)于已經(jīng)寫(xiě)了很多文件來(lái)說(shuō)偷霉，要想統(tǒng)一實(shí)現(xiàn)該效果迄委，有沒(méi)有方法？哈哈类少，答案是有的叙身，不然我怎么截圖出來(lái)! 接下來(lái)需要這幾步，就可以實(shí)現(xiàn)硫狞！
寫(xiě)法1信轿，可實(shí)現(xiàn)功能，控制臺(tái)會(huì)報(bào)warning残吩。（不介意該點(diǎn)财忽，可采取此法）
- 在你項(xiàng)目的某個(gè)目錄(比如utils)下，新建一個(gè)table-column.js, 作用: 繼承el-table-column的功能泣侮，但是在它上面又進(jìn)行自己的擴(kuò)展即彪！
table-column.js， 這里采用了vue jsx的寫(xiě)法活尊，要注意幾點(diǎn)祖凫，
第一琼蚯，項(xiàng)目的element-ui 版本，其中的table是否已經(jīng)支持renderHeader ,
第二惠况，看你的項(xiàng)目是否支持vue jsx, 如何支持請(qǐng)自行百度。不支持的話宁仔，乖乖的動(dòng)態(tài)寫(xiě)render方法哦~
import { TableColumn } from 'element-ui'
export default {
name: 'ElTableColumn',
extends: TableColumn, // 繼承本來(lái)的TableColumn 功能
props: {
// 使用 renderHeader 方法稠屠，設(shè)置默認(rèn)的table-column 表頭渲染，當(dāng)字體超過(guò)7個(gè)字時(shí)(文字出現(xiàn)超出的省略號(hào))翎苫，懸浮顯示toolTip,
// 采用jsx 語(yǔ)法進(jìn)行書(shū)寫(xiě)
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中权埠，引入這個(gè)文件，并且全局注冊(cè)該組件煎谍，覆蓋原來(lái)的ElTableColumn攘蔽，
import FitTableColumn from '@/utils/table-column'
Vue.component('ElTableColumn' || FitTableColumn.name, FitTableColumn)
配置好上述2點(diǎn)，熱更新代碼后呐粘，效果就有啦~
但 控制臺(tái)報(bào)warning這個(gè)：[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header. 满俗。。作岖∷衾看著就很不爽呀，后來(lái)查閱了幾天痘儡，發(fā)現(xiàn)renderHeader不放在props里書(shū)寫(xiě)辕万，放在mounted 方法里書(shū)寫(xiě)，控制臺(tái)就不報(bào)warning了,而且上述代碼也限制的比較死沉删，大于7個(gè)的時(shí)候渐尿，設(shè)定了固定長(zhǎng)度100px,超出部分出現(xiàn)省略號(hào)，體驗(yàn)不好矾瑰。
寫(xiě)法2砖茸， 實(shí)現(xiàn)功能，不報(bào)warning脯倚，比較完美實(shí)現(xiàn)
默認(rèn)情況下渔彰，未對(duì)element-ui 的table的th設(shè)置樣式，當(dāng)字?jǐn)?shù)超了的時(shí)候推正，會(huì)自動(dòng)換行恍涂，就像這樣：
那現(xiàn)在不想要自動(dòng)換行呢，想要超出出現(xiàn)省略號(hào)植榕？很簡(jiǎn)單再沧，為你的el-table設(shè)置class名為admin_table,
再為th設(shè)置一行這樣的css
.admin_table th>.cell{
white-space: nowrap;
}
設(shè)置完畢后，就會(huì)像這樣：
添加tool-tip? utils文件夾下尊残，新建一個(gè)table-column的js文件炒瘸，代碼如下：
import { TableColumn } from 'element-ui'
export default {
name: 'ElTableColumn',
extends: TableColumn, // 繼承TableColumn
mounted() {
// 設(shè)置默認(rèn)的table-column 表頭渲染淤堵，判斷當(dāng)出現(xiàn)省略號(hào)時(shí)el.offsetWidth < el.scrollWidth， 懸浮顯示toolTip,
// 采用jsx 語(yǔ)法進(jìn)行書(shū)寫(xiě), 放在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)) { // 表示超出了顷扩，有省略號(hào)出現(xiàn)
return (<el-tooltip class="item" effect="dark" content={label} placement="top">
<span >{label}</span>
</el-tooltip>);
}else{
return <span>{ label }</span>;
}
}
}
}
最后拐邪，同樣的 在main.js中，引入這個(gè)文件隘截，并且全局注冊(cè)該組件扎阶，覆蓋原來(lái)的ElTableColumn，
import FitTableColumn from '@/utils/table-column'
Vue.component('ElTableColumn' || FitTableColumn.name, FitTableColumn)
刷新頁(yè)面婶芭，則所有的table表頭东臀，當(dāng)顯示出現(xiàn)省略號(hào)時(shí)，鼠標(biāo)懸浮上去都有了tool-tip功能(?ˉ?ˉ?)
