我是怎麼給Element UI的ElTable表頭添加雙擊事件的

先介紹一個背景。需要雙擊表格的表頭切換到編輯表頭文本的模式。衆所周知eltable沒有暴露表頭的插槽，我們想定製表頭幾乎不可能。我想過兩種方案：

1. 擴展eltable，使其支持表頭插槽
2. 攔截表頭單擊事件，觸發雙擊事件

第一種顯然是最靈活，最理想的方案。不過經過半個多小時的調研，我發現eltable的代碼好複雜，骨肉相連呀，table.vue tabheheader.js tablecolumn.js store/helper.js store/index.js等等。短時間內我根本改不動！退而求其次吧，只要能識別出表頭的雙擊事件，然後彈出一個對話框來修改表頭吧。說幹就幹，下面是代碼：

// 這段代碼要寫在Vue.use(Element)之前，寫在main.js裏面
const TableHeader = Element.Table.components.TableHeader;
const handleHeaderClick = TableHeader.methods.handleHeaderClick;
TableHeader.methods.handleHeaderClick = function(column, event) {
	if (this.clickedColumn && this.clickedColumn.id === column.id) {
		this.$parent.$emit('header-dbclick', column, event);
		this.timeout && clearTimeout(this.timeout);
		this.timeout = null;
		this.clickedColumn = null;
		return;
	}
	this.timeout && clearTimeout(this.timeout);
	this.timeout = setTimeout(() => {
		handleHeaderClick.call(this, column, event);
		this.timeout = null;
		this.clickedColumn = null;
	}, 300); // 300毫秒是我隨手寫的，可以根據自己的情況調整

	this.clickedColumn = column;
}

上面代碼應該能跑起來，我是憑着記憶打出來的:)

上面代碼有點問題，我還沒有解決，就是如果連續點擊超過2次，會觸發雙擊事件和單擊事件，如果表頭開啓了排序功能，會平白無故的啓動一次排序，不太理想。要再調一下。不過大體思路是這樣的。

真是好難過，上面的代碼引入了一個bug，參考這裏，解決辦法是在el-table上添加drag-end事件

handleDragend(x,y,z, event) {
	setTimeout(() => {
		let target = event.target;
		while(target && target.tagName !== 'TH') {
			target = target.parentNode;
		}
		if (target) {
			target.classList.add('noclick');
		}
	}, 100);
}

幫助到你請點贊哦，嘻嘻