vxe-table之复选框 设置父子节点不互相关联

news2024/11/17 14:53:41

通过 checkStrictly 设置父子节点不互相关联,默认不显示头部复选框,可以通过 checkbox-config={showHeader} 设置

<template>
  <div>
    <vxe-table
      :column-config="{resizable: true}"
      :data="tableData"
      :tree-config="{transform: true}"
      :checkbox-config="{labelField: 'name', checkStrictly: true}">
      <vxe-column type="checkbox" title="Name" width="280" tree-node></vxe-column>
      <vxe-column field="size" title="Size"></vxe-column>
      <vxe-column field="type" title="Type"></vxe-column>
      <vxe-column field="date" title="Date"></vxe-column>
    </vxe-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const tableData = ref([
  { id: 10000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
  { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },
  { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
  { id: 20045, parentId: 24300, name: 'test abc4', type: 'html', size: 600, date: '2021-04-01' },
  { id: 10053, parentId: 24300, name: 'test abc96', type: 'avi', size: 0, date: '2021-04-01' },
  { id: 24330, parentId: 10053, name: 'test abc5', type: 'txt', size: 25, date: '2021-10-01' },
  { id: 21011, parentId: 10053, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
  { id: 22200, parentId: 10053, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
  { id: 23677, parentId: 23666, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 23671, parentId: 23677, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 23672, parentId: 23677, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 23688, parentId: 23666, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 23681, parentId: 23688, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 23682, parentId: 23688, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' },
  { id: 24566, parentId: 24555, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 24577, parentId: 24555, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
])

</script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python 数学建模——Fitter 拟合数据样本的分布

文章目录 介绍代码实例 介绍 数学建模中很多时候&#xff0c;我们有某个随机变量 X X X 的若干样本 X 1 , X 2 , ⋯ , X n X_1,X_2,\cdots,X_n X1​,X2​,⋯,Xn​&#xff0c;想要还原随机变量 X X X 的概率密度函数 f ( x ) f(x) f(x)。诚然&#xff0c;高斯核密度估计可以…

使用WinRAR把bat文件打包成exe

WinRAR下载 官网地址&#xff1a;https://www.winrar.com.cn/#:~:text64%E4%BD%8D%20WinRAR 百度网盘: https://pan.baidu.com/s/16m8Hph3sHqR2hmrJpY0yKQ 提取码: 3340 选择bat文件&#xff0c;点击添加压缩 名称改成exe&#xff0c;压缩选项那块自动勾选 切换到高级&am…

王者荣耀改重复名(java源码)

王者荣耀改重复名 项目简介 “王者荣耀改重复名”是一个基于 Spring Boot 的应用程序&#xff0c;用于生成王者荣耀游戏中的唯一名称。通过简单的接口和前端页面&#xff0c;用户可以输入旧名称并获得一个新的、不重复的名称。 功能特点 生成新名称&#xff1a;提供一个接口…

PAM后门从入门到应急响应

目录 1. PAM与PAM后门介绍 PAM介绍 PAM后门 2.植入PAM后门 2.1 关闭 selinux 和临时关闭 setenforce 2.2 查看 pam 版本号 2.3 下载对应版本的 pam 源码包 2.4 安装gcc编译器和flex库 2.5 留 PAM 后门和保存 ssh登录的账户密码 2.6 编译 2.9 登录测试 3. 应急响应…

Synchronized的底层实现

Synchronized用法 Synchronized 是 Java 中的一个重要关键字&#xff0c;主要是用来加锁的。在使用Synchronized的时候需要指定一个对象&#xff0c;所以synchornized也被称为对象锁。 synchronized 的使用方法比较简单&#xff0c;主要可以用来修饰方法和代码块。根据其锁定…

PLC远程调试-无需硬件设备-V3.2.0发布

文章目录 前言一、无缝连接&#xff0c;突破距离限制二、高效调试&#xff0c;提升工作效率三、安全可靠&#xff0c;保护数据安全四、用户友好&#xff0c;简化操作流程五、软件地址六、远程调试软件 七、基本操作1、订阅主题2、连接3、串口调试4、网口调试 八、软件地址结束语…

【数据结构精讲】01绪论(基本概念介绍和时间复杂度计算)

绪论 在绪论这部分会介绍常用的一些基本概念&#xff0c;让同学们对这门课的整体有所了解&#xff01; 数据结构以及相关概念 一、几个重要概念 1、数据&#xff1a;凡是能输入到计算机并能被计算机程序处理的符号的总称 2、数据元素&#xff1a;数据的基本单位&#xff0…

C++实现单向链表操作(实验3--作业)

一、单向链表介绍 单向链表是一种常见的数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含一个数据域和一个指向下一个节点的指针域。 结构特点&#xff1a; 单向链表的节点通过指针链接在一起&#xff0c;形成一个线性的数据结构。链表的头节点通常是一个特殊…

【Google Chrome Windows 64 version及 WebDriver 版本】

最近升级到最新版本Chrome后发现页面居然显示错乱实在无语, 打算退回原来的版本, 又发现官方只提供最新的版本下载, 为了解决这个问题所有收集了Chrome历史版本的下载地址分享给大家. Google Chrome Windows version 64 位 VersionSize下载地址Date104.0.5112.10282.76 MBhtt…

leetcode 2398.预算内的最多机器人数目

2398.预算内的最多机器人数目 题意&#xff1a; 解析&#xff1a; 需要注意的是&#xff0c;题目询问中连续是子数组的意思&#xff0c;即求满足条件的最长子数组的长度。 因为是连续的&#xff0c;所以可以用双指针扫描整个数组。每次将右指针 r r r 向右移动一个位置&…

Vue的缓存组件 | 详解KeepAlive

引言 在Vue开发中&#xff0c;我们经常需要处理大量的组件渲染和销毁操作&#xff0c;这可能会影响应用的性能和用户体验。而Vue的KeepAlive组件提供了一种简便的方式来优化组件的渲染和销毁流程&#xff0c;通过缓存已经渲染的组件来提升应用的性能。 本文将详细介绍Vue的Ke…

2024年职场人士PDF转换的新宠儿

PDF文件已经成为日常收发文件的首选项了&#xff0c;它能保证文件页面内容、版式的统一性&#xff0c;但是不太好编辑&#xff0c;所以我们还需要一些小工具来帮我们解决这个问题。今天我们来探讨一下有什么可以从pdf转换器免费版官网下载的工具。 1.Foxit PDF转换大师 链接一…

BuripSuiteProfessional 抓取HTTPS配置

1.电脑拿开代理 谷歌为例 点击三点-设置 -输入代理--点击代理设置 打开手动代理---IP ,端口如图-点击保存 2.下载CA证书 打开代理后,谷歌浏览器打开,输入/burp--如下图-点击CA证书下载证书 选择下载目录--桌面 3.安装CA证书 谷歌浏览器中点开设置-输入证书-点击安全 点击…

Apollo(阿波罗)架构由浅入深剖析

1.最简架构 如果不考虑分布式微服务架构中的服务发现问题,Apollo 的最简架构如下图所示: 注意事项: ConfigService 是一个独立的微服务,服务于 Client 进行配置获取。 Client 和 ConfigService 保持长连接,通过一种拖拉结合 (push & pull) 的模式,实现配置实时更新…

【鸿蒙】HarmonyOS NEXT星河入门到实战8-自定义组件-组件通信

目录 1、模块化语法 1.1 模块化基本认知 1.2 默认导出和导入 1.2.1 在ets下新建tools目录 1.2.2 在tools下新建moduls.ets文件 1.2.3 index.ets 1.3 按需导出和导入 1.4 全部导入 2、自定义组件 -基础 2.1 自定义组件 - 基本使用 2.2 自定义组件 -通用样式 2.2.1 et…

Wophp靶场寻找漏洞练习

1.命令执行漏洞 打开网站划到最下&#xff0c;此处的输入框存在任意命令执行漏洞 输入命令whoami 2.SQL注入 搜索框存在SQL注入&#xff0c;类型为整数型 最终结果可以找到管理员账户和密码 3.任意文件上传漏洞 在进入管理员后台后&#xff0c;上传木马文件 访问该文件&…

【智路】智路OS airos-edge

欢迎来到智路OS https://gitee.com/ZhiluCommunity/airos-edge 智路OS是全球首个开源开放的智能网联路侧单元操作系统&#xff08;简称“智路OS”&#xff09;&#xff0c; 是以高等级自动驾驶技术为牵引&#xff0c;沉淀出来的“车路云网图”一体化的智能交通基础软件平台。…

基于SpringBoot+Vue的智慧自习室预约管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…

基于vue框架的宠物店管理系统的设计与实现4czn0(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,商品分类,服务类型,商品信息,商品订单,宠物服务,服务预约,服务评价,商品咨询 开题报告内容 基于Vue框架的宠物店管理系统的设计与实现开题报告 一、引言 随着宠物行业的蓬勃发展&#xff0c;宠物店作为宠物产品与服务的重要提供…

神经网络通俗理解学习笔记(2)循环神经网络RNN

循环神经网络RNN 序列建模自回归模型隐变量自回归模型 文本数据预处理循环神经网络随时间反向传播循环神经网络代码实现RNN的长期依赖问题 序列建模 序列数据-时间 不同时间上收集到的数据&#xff0c;描述现象随时间变化的情况 时间序列分析是指从时间排列的数据点中抽取有价…