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选择框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue基础之使用get、post、jsonp实现交互功能示例
这篇文章主要介绍了vue基础之使用get、post、jsonp实现交互功能,结合实例形式分析了vue.js中get、post及jsonp针对本地文件、网络接口实现交互功能相关操作技巧,需要的朋友可以参考下2019-03-03
React组件通信之路由传参(react-router-dom)
本文主要介绍了React组件通信之路由传参(react-router-dom),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-10-10
el-date-picker设置日期默认值两种方法(当月月初至月末)
这篇文章主要给大家介绍了关于el-date-picker设置日期默认值(当月月初至月末)的相关资料,文中通过代码示例将解决的办法介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
Vue项目打包(build)时,自动打以时间命名的压缩包方式
这篇文章主要介绍了Vue项目打包(build)时,自动打以时间命名的压缩包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10
Vue中commit和dispatch区别及用法辨析(最新)
在Vue中,commit和dispatch是两个用于触发Vuex store中的mutations和actions的方法,这篇文章主要介绍了Vue中commit和dispatch区别及其用法辨析,需要的朋友可以参考下2024-06-06


最新评论