vxe-table 右键菜单+权限控制(v3)

 1.menu-config 是用于配置右键菜单的属性。通过 menu-config 属性,定义右键菜单的内容、显示方式和样式。

通过 menu-config 属性配置了右键菜单,其中的 options 属性定义了右键菜单的选项。用户在表格中右键点击时,将会弹出包含这些选项的自定义右键菜单

2.header-cell-menu 是一个用于配置表头单元格菜单的属性。

  通过设置 header-cell-menu 属性为 true 来启用表头单元格菜单。启用后,用户可以在表头右键点击时弹出菜单,进行一些与表头相关的操作,比如排序、筛选等 

 3.cell-menu 是一个用于配置单元格菜单的属性。通过 cell-menu,为单元格添加菜单

 4.menu-click 是一个事件,在用户点击表格的右键菜单项时触发。通过监听 menu-click 事件来处理用户点击右键菜单的操作

 5.footer-method 是一个用于配置表格底部合计行内容的属性

  设置 footer-method 属性为 calculateFooter 方法来自定义底部合计行的内容。在calculateFooter方法中,我们对表格数据进行合计计算,并返回合计值数组。

 6.row-config 是一个用于配置行的属性。通过 row-config,为行设置一些特定的配置,比如当前行、禁用行等 通过设置 row-config 属性为 rowConfig 对象来配置行的属性。

<template><vxe-tablebordershow-footerref="xTable"height="400":row-config="{isCurrent: true}":column-config="{isCurrent: true}":footer-method="footerMethod":data="tableData":menu-config="tableMenu"@header-cell-menu="headerCellContextMenuEvent"@cell-menu="cellContextMenuEvent"@menu-click="contextMenuClickEvent"><vxe-column type="seq" width="60"></vxe-column><vxe-column field="name" title="Name"></vxe-column><vxe-column field="sex" title="Sex"></vxe-column><vxe-column field="age" title="Age"></vxe-column><vxe-column field="time" title="Time"></vxe-column></vxe-table>
</template>
<script>
export default {data () {return {tableData: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 36, address: 'Guangzhou' }],tableMenu: {// 头部右键header: {options: [[{ code: 'exportAll', name: '导出所有.csv', visible: true, disabled: false }]]},// 表格右键body: {options: [[{ code: 'details', name: '查看详情', prefixIcon: 'vxe-icon-link', visible: true, disabled: false }],[{ code: 'copy', name: 'app.body.label.copy', prefixIcon: 'vxe-icon-copy', visible: true, disabled: false },{ code: 'clear', name: '清除内容', prefixIcon: 'vxe-icon-copy', visible: true, disabled: false }],[{ code: 'remove', name: '删除', visible: true, disabled: false },{code: 'filter',name: 'app.body.label.filter',visible: true,disabled: false,children: [{ code: 'clearFilter', name: '清除筛选', visible: true, disabled: false },{ code: 'filterSelect', name: '按所选单元格的值筛选', visible: true, disabled: false }]},{code: 'sort',name: 'app.body.label.sort',visible: true,disabled: false,children: [{ code: 'clearSort', name: '清除排序', visible: true, disabled: false },{ code: 'sortAsc', name: '升序', visible: true, disabled: false },{ code: 'sortDesc', name: '倒序', visible: true, disabled: false }]},{ code: 'print', name: '打印', disabled: true }]]},// 表尾右键footer: {options: [[{ code: 'clearAll', name: '清空数据', visible: true, disabled: false }]]},// 右键区域权限方法设置visibleMethod: this.visibleMethod}}},methods: {// 配置表头单元格菜单的属性headerCellContextMenuEvent ({ column }) {this.$refs.xTable.setCurrentColumn(column)},// 配置单元格菜单的属性cellContextMenuEvent ({ row }) {this.$refs.xTable.setCurrentRow(row)},// 右键区域权限方法设置visibleMethod ({ options, column }) {// 示例:只有 name 列允许操作,清除按钮只能在 age 才显示// 显示之前处理按钮的操作权限const isDisabled = !column || column.property !== 'name'const isVisible = column && column.property === 'age'options.forEach(list => {list.forEach(item => {if (column) {item.disabled = falseif (['copy', 'remove'].includes(item.code)) {item.disabled = isDisabled}if (['details'].includes(item.code)) {item.visible = column.property === 'name'} else if (['clear', 'filter'].includes(item.code)) {item.visible = isVisible}} else {item.disabled = true}if (item.children) {item.children.forEach(childItem => {childItem.disabled = item.disabled})}})})return true},// 用户点击表格的右键菜单项时触发contextMenuClickEvent ({ menu, row, column }) {switch (menu.code) {case 'copy':if (row && column) {if (XEClipboard.copy(row[column.property])) {VXETable.modal.message({ content: '已复制到剪贴板!', status: 'success' })}}breakdefault:VXETable.modal.message({ content: `点击了 "${menu.name}"`, status: 'info' })}},meanNum (list, field) {let count = 0list.forEach(item => {count += Number(item[field])})return count / list.length},// 表格尾部计算footerMethod ({ columns, data }) {return [columns.map((column, columnIndex) => {if (columnIndex === 0) {return '平均'}if (['age', 'rate'].includes(column.property)) {return parseInt(this.meanNum(data, column.property))}return null})]}}
}
</script>
<style scoped lang="less">
</style>

效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/215718.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

练练手之“四环”“磁铁”(svg)

文本是闲暇之余练习svg的运用的产物&#xff0c;记录以备有需。 <svg xmlns"http://www.w3.org/2000/svg" viewBox"0 0 500 500" width"500px" height"500px"><path d"M150,100 A50,50 0 1,1 150,99.999" stroke&q…

【数据结构(九)】顺序存储二叉树(2)

文章目录 1. 相关概念2. 顺序存储二叉树的遍历 1. 相关概念 从数据存储来看&#xff0c;数组存储方式和树的存储方式可以相互转换&#xff0c;即数组可以转换成树&#xff0c;树也可以转换成数组&#xff0c;看右面的示意图。 转换原则:     1.上图的二叉树的结点&#xff…

【深度学习】注意力机制(五)

本文介绍一些注意力机制的实现&#xff0c;包括CSRA/Spatial Shift/Triplet Attention/Coordinate Attention/ACmix。 【深度学习】注意力机制&#xff08;一&#xff09; 【深度学习】注意力机制&#xff08;二&#xff09; 【深度学习】注意力机制&#xff08;三&#xff…

python 实现 AIGC 大模型中的概率论:生日问题的基本推导

在上一节中&#xff0c;我们对生日问题进行了严谨的阐述&#xff1a;假设屋子里面每个人的生日相互独立&#xff0c;而且等可能的出现在一年 365 天中的任何一天&#xff0c;试问我们需要多少人才能让某两个人的生日在同一天的概率超过 50%。 处理抽象逻辑问题的一个入手点就是…

centos 7.9 二进制部署 kubernetes v1.27.7

文章目录 1. 预备条件2. 基础配置2.1 配置root远程登录2.2 配置主机名2.3 安装 ansible2.4 配置互信2.5 配置hosts文件2.6 关闭防firewalld火墙2.7 关闭 selinux2.8 关闭交换分区swap2.9 修改内核参数2.10 安装iptables2.11 开启ipvs2.12 配置limits参数2.13 配置 yum2.14 配置…

css实现姓名两端对齐

1.1 效果 1.2 主要代码 text-align-last: justify; 1.3 html完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&quo…

【LeetCode刷题-树】-- 116.填充每个节点的下一个右侧节点指针

116.填充每个节点的下一个右侧节点指针 方法&#xff1a;层次遍历 /* // Definition for a Node. class Node {public int val;public Node left;public Node right;public Node next;public Node() {}public Node(int _val) {val _val;}public Node(int _val, Node _left, N…

MeterSphere实战(一)

MeterSphere是一位朋友讲到的测试平台&#xff0c;说这东西是开源的&#xff0c;因为我是做测试的&#xff0c;很乐意了解一些新鲜事物。在我看来&#xff0c;测试就是要专注一些领域&#xff0c;然后要啥都会一点点&#xff0c;接着融会贯通起来&#xff0c;这样就可以万变不离…

RCNN 学习

RCNN算法流程 RCNN算法流程可分为4个步骤 一张图像生成1K~2K个候选区域&#xff08;使用Selective Search方法&#xff09;对每个候选区域&#xff0c;使用深度网络图特征特征送入每一类的SVM分类器&#xff0c;判别是否属于该类使用回归期器细修正候选框位置 1.候选区域的生…

漏洞复现-泛微云桥 e-Bridge SQL注入(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…

C51单片机中reentrant关键字的使用,关于MULTIPLE CALL TO FUNCTION警告的问题

关于可重入关键字reentrant的使用&#xff1a; 现象&#xff1a; 在一个项目中警告信息如下&#xff0c;提示该函数多次调用&#xff0c;因为该函数在串口中断和主循环中都有被调用。 影响&#xff1a; 如果在使用该函数期间被中断打断&#xff0c;而中断也调用了该函数&a…

文件管理和操作工具Path Finder mac功能介绍

Path Finder mac是一款Mac平台上的文件管理和操作工具&#xff0c;提供了比Finder更丰富的功能和更直观的用户界面。它可以帮助用户更高效地浏览、复制、移动、删除和管理文件&#xff0c;以及进行各种高级操作。 Path Finder mac软件功能 - 文件浏览&#xff1a;可以快速浏览文…

node.js和npm的安装与环境配置(2023最新版)

目录 安装node.js测试是否安装成功测试npm环境配置更改环境变量新建系统变量 安装node.js 1、进入官网下载&#xff1a;node.js官网 我选择的是windows64位的&#xff0c;你可以根据自己的实际情况选择对应的版本。 2、下载完成&#xff0c;安装。 打开安装程序 接受协议 选…

学习-面试java基础-(集合)

String 为什么不可变&#xff1f; 1线程安全 2支持hash映射和缓存。因为String的hash值经常会使用到&#xff0c;比如作为 Map 的键&#xff0c;不可变的特性使得 hash 值也不会变&#xff0c;不需要重新计算。 3出于安全考虑。网络地址URL、文件路径path、密码通常情况下都是以…

降低检索系统搭建门槛,轻松实现 RAG 应用!Zilliz Cloud Pipelines 惊喜上线

Zilliz Cloud 正式上线 Pipelines&#xff01; Zilliz Cloud Pipelines 可以将文档、文本片段和图像等非结构化数据转换成可搜索的向量并存储在 Collection 中&#xff0c;帮助开发者简化工程开发&#xff0c;助力其实现多种场景的 RAG 应用&#xff0c;将复杂生产系统的搭建和…

【已解决】SpringBoot Maven 打包失败:class lombok.javac.apt.LombokProcessor 错误

文章目录 出错原因解决办法总结 最新项目部署的时候&#xff0c;出现了一个maven打包失败的问题&#xff0c;主要是lombok这个组件出的问题&#xff0c;具体的错误信息如下&#xff1a; 我的lombok版本如下&#xff1a; <dependency><groupId>org.projectlombok&l…

Editplus安装教程(附带汉化教程与获取注册码教程)

文章目录 前言一、Editplus简介1. 简介2. 特点和功能 二、Editplus5安装步骤1. 下载EditPlus52. 运行安装程序3. 接受许可协议4. 选择安装位置5. 选择组件6. 完成安装7. 启动EditPlus8. 注册EditPlus 三、Editplus4安装步骤1. 下载EditPlus42. 安装EditPlus43. 注册码获取 四、…

代码随想录算法训练营 | day48 动态规划 198.打家劫舍,213.打家劫舍Ⅱ,337.打家劫舍Ⅲ

刷题 198.打家劫舍 题目链接 | 文章讲解 | 视频讲解 题目&#xff1a;你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被…

python实战演练之迎接冬至的第一场雪

写在前面 WINTER IS COMING Python实现大雪纷飞的效果&#xff0c;完整代码在文末哦~ 准备开始 WINTER IS COMING Python是一种高级编程语言&#xff0c;Turtle是Python的一个图形化模块&#xff0c;它可以帮助学习者更好地理解编程概念&#xff0c;同时可以进行图形化编程。 …

论文笔记:A review on multi-label learning

一、介绍 传统的监督学习是单标签学习&#xff0c;但是现实中一个实例可能对应多个标签。这篇文章介绍了多标签分类的定义和评价指标、多标签学习的算法还有其他相关的任务。 二、问题相关定义 2.1 多标签学习任务 假设 X R d X R^d XRd&#xff0c;表示d维的输入空间&am…