elementui 表格通过自定义指令实现shift多选

function getIndex(row,node,id){
	if(node.$isShift){
		node.$endSelectData = row[id]
	}else{
		node.$startSelectData = row[id]
		node.$endSelectData = null
	}
	getNeedSelectData(node,id)
}
function getNeedSelectData(node,id){
	if(node.$endSelectData && node.$startSelectData ){
		let startIndex = null,endIndex = null
		node.tableData.forEach((value,key)=>{
			if(value[id] === node.$startSelectData){
				startIndex = key
			}
			if(value[id]===node.$endSelectData){
				endIndex = key
			}
		})
		checkBox(node,startIndex,endIndex )
	}
}

function checkBox(node,startIndex,endIndex ){
	if(startIndex>endIndex ){
		let temp = endIndex
		endIndex = startIndex
		startIndex = temp
	}
	const checkRows = node.tableData.slice(startIndex+1,endIndex);
	//const checkRows = node.tableData.slice(startIndex,endIndex+1); 通过行多选时使用
	checkRows.forEach(row=>{
		node.toggleRowSelection(row)
	})
	delete node.$startSelectData
	delete node.$endSelectData
}

function bind(el,binding){
	//binding.value数据唯一标识
	if(!binding.value)return
	//使表格可获取焦点，达到可以监听键盘事件的目的   通过行多选时使用
	//el.tabIndex = 1
	//屏蔽浏览器文字划选  通过行多选时使用 可以写到键盘事件keydown下（未测试）
	el.onselectstart = function(){return false}
	el.onkeydown = function(val){
		if(val.key==='Shift'){
			el.__vue__.$isShift = true
		}
	}
	el.onkeyup=function(val){
		if(val.key==='Shift'){
			el.__vue__.$isShift = false
		}
	}
	//通过checkbox选择则监听select事件
	el.__vue__.$on('select',(selection,row)=>{
		getIndex(row,el.__vue__,binding.value);
	})
	//通过行选择则监听row-click事件
	//el.__vue__.$on('row-click',(row,column,event)=>{
	//	getIndex(row,el.__vue__,binding.value);
	//})

}

使用

Vue.directive('select-shift',bind)
<el-table v-select-shift="'oid'"></el-table>