vue+elementUI實現右擊指定表格列的單元格顯示選擇框功能

更新時間：2024年03月20日 16:26:30 投稿：mrr

這篇文章主要介紹了vue+elementUI實現右擊指定表格列的單元格顯示選擇框功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、template代碼如下：

1、表格單元格中添加的代碼：

<div v-if="item.label === '鐵心級號'" @contextmenu.prevent="openRightMenu($event, item, scope.$index)" style="height: 38px; line-height: 38px;">
								<span style="display: inline-block; width: 100%; height: 100%;">{{scope.row[item.prop] }}</span>
							</div>

2、右鍵時彈出的選擇框代碼

<div class="u-contextmenu" v-show="rightClickObj.visible" :style="{ left: rightClickObj.left + 'px', top: rightClickObj.top + 'px'}">
			<p>選擇鐵心級號<i class="el-icon-close" style="float: right; cursor: pointer;" @click="rightClickObj.visible = false"></i></p>
			<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
			<el-checkbox-group v-model="checkList" @change="handleCheckedChange">
				<el-checkbox  v-for="(item, index) in coreLevelNumArr" :key="index" :label="item" ></el-checkbox>
			</el-checkbox-group>
			<div style="float: right;">
				<!-- <el-button type="primary" @click="showLevel">顯示</el-button> -->
				<el-button type="primary" @click="hideLevel">隱藏</el-button>
			</div>
		</div>

js代碼如下：

// 鐵心級號選擇時
		handleCheckedChange: function (val) {
			let checkedCount = val.length;
			this.checkAll = checkedCount === this.coreLevelNumArr.length; //全選是否勾選上
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.coreLevelNumArr.length;
		},
		// 鐵心級號全選觸發(fā)的事件
		handleCheckAllChange: function (val) {
			this.checkList = val ? this.coreLevelNumArr : []; // 全選和全不選的賦值
			this.isIndeterminate = false;
		},
		showLevel:function(){
			this.rightClickObj.visible = false;
			this.hideLevelList = this.coreLevelNumArr.filter(x => this.checkList.every(y => y !== x));
		},
		// 隱藏選中級號的行
		hideLevel:function(){
			this.rightClickObj.visible = false;
			this.hideLevelList = this.checkList;
			// 更改表格中的數據
			this.updateTableData.forEach((item) => {
				if(this.hideLevelList.indexOf(item.level_no) > -1){//判斷當前行的級號是否在隱藏的級號數組中
					item.isShow = false;
				}else{
					item.isShow = true;
				}
			});
			console.log(this.updateTableData);
		},
		//每一行的回調樣式方法
		rowClassName: function ({ row }) {
			if(this.hideLevelList.indexOf(row.level_no) > -1){ 
				return "hideRow"; //如果當前行的級號在隱藏級號數組中將返回隱藏類名
			}else{
				return "";
			}
		},
		/**
		 * 右鍵鐵心級號顯示選擇菜單
		 * @param {Number} index 表格行下標
		 */
		openRightMenu(event,item,index){
			this.rightClickObj.left = 51;
			this.rightClickObj.top = 870 + (index+1)*40;
			this.rightClickObj.visible = true
		},

到此這篇關于vue+elementUI實現右擊指定表格列的單元格顯示選擇框的文章就介紹到這了,更多相關vue elementUI選擇框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: