【vxe-table】复选框设置为单选,隐藏表头复选框

2023-05-16

vxe-table和el-table有些许不同

el-table复选框只允许点击单选的话,可以这样

   @row-click="rowClick"
 // 点击选中
    rowClick(row) {
      // 单选
      if (!this.multiple) {
        if (this.$refs.standTables.selection.length >= 1) {
          this.$refs.standTables.selection.length = 1
        }
        this.$refs.standTables.selection.shift()
      }
      this.row = row
      this.$refs.standTables.toggleRowSelection(row)
    },

vxe-table的话稍稍麻烦些
首先要加配置项checkbox-config,触发方式为row,才会点击行勾选当前行的复选框选中状态
在这里插入图片描述

 <vxe-table
   ref="invoiceVxeTable"
 :checkbox-config="{ checkField: 'checked', trigger: 'row' }"
 
   @checkbox-change="selectEvent"
    >
//单选
  selectEvent(data) {
      let row = data.row
      this.invoiceRow = data.row
      let isSelect = this.$refs.invoiceVxeTable.isCheckedByCheckboxRow(row)
      this.$refs.invoiceVxeTable.setAllCheckboxRow(false)
      this.$refs.invoiceVxeTable.setCheckboxRow(row, isSelect)      
    },

我这有个tab切换,每个tab都是一个列表,切换回来的时候,勾选的状态还要在
所以在tab的tab-click事件中,再处理一下

 <el-tabs v-model="type" @tab-click="handleChange" type="card" >
 handleChange(tab, event) {
      if (tab.name == 'Detail') {
       .................
      } else if (tab.name == 'MailingInfo') {
       ....................
      } else {
      //如果直接这样写 this.$refs.invoiceVxeTable.toggleCheckboxRow(this.invoiceRow),会不起作用
        this.$nextTick(() => {
          if (this.$refs.invoiceVxeTable) {
            let index = this.masterList.findIndex(item => item.invoiceNo ==    
                	this.invoiceRow.invoiceNo)
            this.$refs.invoiceVxeTable.toggleCheckboxRow(this.masterList[index])
          }
        })
      }
    },

5月6号更新:

如果要单选并且表头的复选框不允许多选,可以css手动控制复选框隐藏

/deep/ .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--unchecked-icon {
  display: none !important;
}
/deep/ .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--indeterminate-icon {
  display: none !important;
}

如果只要表头隐藏,不控单选的话,可以在checkbox-config配置中加 checkStrictly: true,设置父子节点不互相关联,不太好用

  :checkbox-config="{ checkField: 'checked', trigger: 'row' ,checkStrictly: true}"

还有checkMethod方法,会使所有列都禁用,如何只禁表头复选框,还没实现,待更新~~~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【vxe-table】复选框设置为单选,隐藏表头复选框 的相关文章

  • SQLite Studio如何使用的详细教程!零开始教起哦!

    目录 1 xff1a 下载安装SQLite Studio xff08 可在CSDN查找下载 xff09 2 xff1a 打开SQLite Studio 3 xff1a 使用SQLite Studio 1 xff1a 下载安装SQLite S
  • 什么是makefile?教你简单编写和使用Makefile

    什么是Makefile xff1f Makefile可以简单的理解成一个工程文件的编译规则 Makefile文件描述了Linux系统下C C 43 43 项目工程的编译规则 xff0c 它的作用是用来自动化编译C C 43 43 的项目 一
  • 《程序员面试金典(第6版)》面试题 16.14. 最佳直线(向量,C++)

    题目描述 给定一个二维平面及平面上的 N 个点列表Points xff0c 其中第i个点的坐标为Points i 61 Xi Yi 请找出一条直线 xff0c 其通过的点的数目最多 设穿过最多点的直线所穿过的全部点编号从小到大排序的列表为S
  • 制作Ubuntu启动盘并安装ros的学习笔记

    本菜鸡刚开始学习ros xff0c 之前一直用虚拟机 xff0c 但但是配置极其麻烦 xff0c 容易出现各种错误 xff0c 对新手极其不友好 亲测做一个Ubuntu的启动盘很是稳定 为了后续学习时回看 xff0c 记录一下遇到的问题以及
  • Ubuntu22.04没有ttyUSB(无法访问 ‘/dev/ttyUSB‘: 没有那个文件或目录)问题解决

    无法访问 dev ttyUSB 没有那个文件或目录 环境 xff1a ubuntu22 04 xff0c 使用需求为USB转串口 问题描述 在给串口读写权限时 xff0c 出现问题 xff1a 无法访问 dev ttyUSB0 没有那个文件
  • 光流(optical flow)基础概念以及典型算法

    光流 xff08 optical flow xff09 基础概念以及典型算法 文章目录 光流 xff08 optical flow xff09 基础概念以及典型算法什么是光流 xff1f 一 传统经典光流算法 xff1a Lucas Kan
  • PX4无人机安装问题及解决方案

    文章目录 1 git clone1 git clone fatal error2 PX4源码下载很慢 2 ROS安装1 设置密钥2 xff09 E 无法定位软件包 ros melodic desktop full3 sudo apt ins
  • 玩转k8s(四)—— 通过Service访问Pod

    我们不应该期望k8s Pod是健壮的 xff0c 而是要假设Pod中的容器很可能因为各种原因发生故障而死掉 Deployment等Controller会通过动态的创建和销毁Pod来保证应用整体的健壮性 换句话说 xff0c Pod是脆弱的
  • STM32之IO模拟串口篇

    概述 xff1a 硬件 xff1a 基于stm32f767igt6水星板开发 xff1b 软件 xff1a 使用了RT Thread实时操作系统 xff0c 两个空闲IO口 PE2用作串口TX端 xff0c 搭配一个定时器控制发送时序 xf
  • BPMN2.0 任务-脚本任务

    描述 脚本任务 script task 是自动执行的活动 当流程执行到达脚本任务时 会执行相应的脚本 脚本任务用左上角有一个小 脚本 图标的标准BPMN 2 0任务 圆角矩形 表示 脚本任务使用script与scriptFormat元素定义
  • 最短路径问题——基于Dijkstra算法和Floyd算法的最短路径问题

    目录 1 算法介绍 xff08 1 xff09 Dijkstra Algorithm xff08 迪杰斯特拉算法 xff09 xff08 2 xff09 Floyd Algorithm xff08 佛洛依德算法 xff09 xff08 3
  • 2.1.2 进程的状态与转换

    目录 知识总览 1 三种基本状态 xff08 1 xff09 运行态 xff08 Running xff09 xff08 2 xff09 就绪态 xff08 Ready xff09 xff08 3 xff09 阻塞态 xff08 Waiti
  • 合并排序与快速排序算法

    文章目录 算法介绍代码实现1 合并排序2 快速排序 总结 算法介绍 合并排序与快速排序是排序算法中常用的两种排序算法 xff0c 合并排序把数据分为两段 xff0c 从两段中逐个选最小的元素移入新数据的末尾 xff1b 快速排序是在序列中挑
  • 2进制、8进制、10进制、16进制相互转换

    文章目录 介绍1 二进制转其他进制2 八进制转其他进制3 十进制转其他进制4 十六进制转其他进制总结 介绍 百度百科 xff1a 进制也就是进位计数制 xff0c 是人为定义的带进位的计数方法 xff08 有不带进位的计数方法 xff0c
  • Hadoop学习笔记--HBase相关操作指令

    文章目录 引言0 HBase的启动与停止1 创建表2 删除表3 表的其他操作3 1 修改表结构3 2 查看表结构3 3 显示所有用户定义的表3 4 查询表是否存在3 5 查询表是否可用3 6 查询表中记录数 4 插入数据4 1 插入单条数据
  • Hadoop学习笔记--MapReduce

    文章目录 引言1 经典案例分析 xff1a WordCount1 1 Map阶段 xff1a TokenizerMapper类1 2 Reduce阶段 xff1a IntSumReduce类1 3 Driver阶段 xff1a main x
  • Hadoop学习笔记--YARN

    文章目录 引言1 YARN的优势1 1 可扩展性 xff08 Scalability xff09 1 2 可用性 xff08 Availability xff09 1 3 利用率 xff08 Utilization xff09 1 4 多租
  • scala编程--计算级数&统计学生成绩

    目录 案例1 xff1a 计算级数1 1 案例要求1 2 实现代码 案例2 xff1a 统计学生成绩1 1 案例要求1 2 实现代码 总结 案例1 xff1a 计算级数 1 1 案例要求 级数计算函数实现较为简单 xff0c 这里不再赘述
  • RDD本地文件系统读入显示文件不存在fileNotExit

    问题 在从本地文件系统读入数据创建RDD时 xff0c 执行行动操作 xff0c 显示文件不存在 解决方案 从本地文件系统读入时 xff0c 需在所有节点的相同目录下存在该文件 xff0c 如读取文件在 file span class to
  • spark-shell报错:java.io.IOException: Failed to replace a bad datanode on the existing pipeline due to

    目录 问题报错信息原因解决方案 问题 spark shell在执行一段时间后报错 xff1a java io IOException Failed to replace a bad datanode on the existing pipe

随机推荐