本文主要是介绍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;},// 铁心级号全选触发的事件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实现右击指定表格列的单元格显示选择框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
