vxe-table 键盘上下左右控制选中区域移动[3]_vxe-table 选中输入框可键盘输入

前几天写了个vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作[2]_wanghanlu_的博客-CSDN博客

鼠标滑动选择的博客。该博客是建立在上面那个博客的基础上

接下来来实现一下通过键盘的上下左右键来控制选择区域的移动。

demo 点击查看demo演示

先说下实现思路:

1.需要给表格添加键盘按键事件

2.根据具体按的哪个键的去改变存储区域框的位置的变量。

3.然后显示区域框.

直接上代码了.

首先需要在改一个配置：

因为我们需要获取当前行的位置。

1.给表格添加按键事件@keydown

<vxe-grid ref='xGrid' v-bind="gridOptions" height="500px"
			@cell-click="tableCellClick"
			@toolbar-button-click="toolbarButtonClickEvent"
			
			@keydown="tableKeydown">
			<!-- 键盘按键事件 -->
		</vxe-grid>

2.添加两个方法tableKeydown，

tableKeydown({$event}){
				let tablexgrid=this.getTablexGrid();
				let tableColumn=this.getTablexGrid().getTableColumn()["visibleColumn"];
				let tableData=this.getTablexGrid().getTableData()["visibleData"];
				let startRowIndex=this.selectionStart["rowIndex"];
				let endRowIndex=this.selectionEnd["rowIndex"];
				let startColumnIndex=this.selectionStart["cellIndex"];
				let endColumnIndex=this.selectionEnd["cellIndex"];
				var maxColumnIndex=tableColumn.length-1;
				var maxRowIndex=tableData.length-1;
				var minColumnIndex=0;
				var minRowIndex=0;
				if($event.keyCode===39){
					//右键 向右
					if(endColumnIndex+1<=maxColumnIndex){
						var currentRow=tablexgrid.getCurrentRecord();
						const rowIndex =tableData.findIndex((row)=>{
							return row._X_ROW_KEY==currentRow._X_ROW_KEY;
						})
						this.selectionStart={"cellIndex":endColumnIndex+1,"rowIndex":rowIndex};
						this.selectionEnd={"cellIndex":endColumnIndex+1,"rowIndex":rowIndex};
					}
					this.setselectedCellArea();
					this.tableScrollMove("right");
					event.preventDefault();
				}else if($event.keyCode===37){
					//左键 向左
					if(startColumnIndex-1>=minColumnIndex){
						var currentRow=tablexgrid.getCurrentRecord();
						const rowIndex =tableData.findIndex((row)=>{
							return row._X_ROW_KEY==currentRow._X_ROW_KEY;
						})
						this.selectionStart={"cellIndex":startColumnIndex-1,"rowIndex":rowIndex};
						this.selectionEnd={"cellIndex":startColumnIndex-1,"rowIndex":rowIndex};
					}
					this.setselectedCellArea();
					this.tableScrollMove("left");
					event.preventDefault();
				}else if($event.keyCode===38){
					//向上 
					var currentRow=tablexgrid.getCurrentRecord();
					const rowIndex =tableData.findIndex((row)=>{
						return row._X_ROW_KEY==currentRow._X_ROW_KEY;
					})
					if(rowIndex-1>=minRowIndex){
						this.selectionStart={"cellIndex":startColumnIndex,"rowIndex":rowIndex-1};
						this.selectionEnd={"cellIndex":startColumnIndex,"rowIndex":rowIndex-1};
					}
					this.setselectedCellArea();
					//判断是否小于最小行的个数
					event.preventDefault();
				}else if($event.keyCode===40){
					//向下
					var currentRow=tablexgrid.getCurrentRecord();
					const rowIndex =tableData.findIndex((row)=>{
						return row._X_ROW_KEY==currentRow._X_ROW_KEY;
					})
					if(rowIndex+1<=maxRowIndex){
						this.selectionStart={"cellIndex":startColumnIndex,"rowIndex":rowIndex+1};
						this.selectionEnd={"cellIndex":startColumnIndex,"rowIndex":rowIndex+1};
					}
					this.setselectedCellArea();
					event.preventDefault();
				}
			},

tableScrollMove:

//控制滚动条
			//move：快捷键左右时有效,其他无效
			tableScrollMove(move){
				let tableColumn=this.getTablexGrid().getTableColumn()["visibleColumn"];
				let tableData=this.getTablexGrid().getTableData()["visibleData"];
				let startRowIndex=this.selectionStart["rowIndex"];
				let endRowIndex=this.selectionEnd["rowIndex"];
				let startColumnIndex=this.selectionStart["cellIndex"];
				let endColumnIndex=this.selectionEnd["cellIndex"];
				
				let fixedWidth=0;
				
				//获取固定列宽度fixed--hidden
				let flexDiv=this.$refs.xGrid.$el.querySelector(".vxe-table--fixed-left-wrapper");
				if(flexDiv){
					fixedWidth=flexDiv.offsetWidth;
				}
				//获取td
				var td;
				var tbody=this.$refs.xGrid.$el.querySelector(".vxe-table--main-wrapper table tbody");
				if(tbody&&move=="left"){
					var column=tableColumn[startColumnIndex];
					td=tbody.querySelector(`td[colid="${column.id}"]`);
				}else if(tbody&&move=="right"){
					var column=tableColumn[endColumnIndex];
					td=tbody.querySelector(`td[colid="${column.id}"]`);
				}
				if(td){
				//判断是否隐藏
					var tdRect=td.getBoundingClientRect();
					var table=this.$refs.xGrid.$el.querySelector(".vxe-table--body-wrapper table");
					if(table){
						let tableRect=table.parentElement.getBoundingClientRect();
						//需要减去左边固定列的宽度
						if (tdRect.top < tableRect.top ||tdRect.bottom > tableRect.bottom ||
						    tdRect.left < tableRect.left+fixedWidth ||tdRect.right > tableRect.right){
							if(move=="right"){
								table.parentElement.scrollLeft+=(tdRect.right-tableRect.right);
							}else if(move=="left"){
								table.parentElement.scrollLeft+=(tdRect.left-tableRect.left-fixedWidth);
							}
						  } else {
						    // console.log("该 td 元素未隐藏");
						  }
					}
				}
			},

功能就完成了啊。