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; }, // 铁心级号全选触发的事件 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选择框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue3+Element Plus使用svg加载iconfont的处理方法
这篇文章主要介绍了Vue3+Element Plus使用svg加载iconfont的解决方案,本文详细介绍了如何在Element Plus中使用iconfont,简单的说就是要将其封装成SVG,并且支持动态修改颜色,需要的朋友可以参考下2022-08-08vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法
Vue.js是一个流行的JavaScript框架,它可以帮助开发者构建交互式Web应用程序,这篇文章主要给大家介绍了关于vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法,需要的朋友可以参考下2023-12-12vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
validate()可以指定校验范围内,或者是全局的 字段。而validateAll()只能校验全局。这篇文章主要介绍了vue+VeeValidate 校验范围(部分校验,全部校验) ,需要的朋友可以参考下2018-10-10
最新评论