树状表格父节点选择 - 在Vue.js中实现仅选择父节点的树状表格功能

功能介绍

        本文介绍了如何在Vue.js框架下实现一个树状表格，其中只支持选择父节点的复选框。通过这个功能，用户可以方便地选择表格中的父节点，而无需关心子节点的选择。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。        

示例

代码

视图部分

<template><div><el-tablev-loading="loading":data="tableData"style="width: 100%;margin: 20px;"row-key="id"borderdefault-expand-all:tree-props="{ children: 'children' }"><el-table-column width="60" align="center"><template slot="header" slot-scope="scope"><el-checkbox :indeterminate="isIndeterminate" v-model="isFullChecked" @change="checkAllChange"></el-checkbox></template><template slot-scope="{row}" v-if="row.children"><el-checkbox :indeterminate="row.isIndeterminate" :value="row.checked" @change="checkRowChange(row)"></el-checkbox></template></el-table-column><el-table-column prop="series" label="系列" align="center"></el-table-column><el-table-column prop="num" label="编号" align="center"></el-table-column><el-table-column prop="name" label="名字" align="center"></el-table-column></el-table></div>
</template>

        表格的容器<el-table>标签。下面是该标签的一些属性和绑定：

  • v-loading="loading"：通过loading属性控制表格的加载状态.
  • :data="tableData"：表格数据通过tableData属性进行绑定.
  • style="width: 100%;margin: 20px;"：设置表格容器的宽度和外边距样式.
  • row-key="id"：指定表格行的唯一标识字段为id属性.
  • border：显示表格边框.
  • default-expand-all：默认展开所有的表格行.
  • :tree-props="{ children: 'children' }"：指定表格数据按照树状结构展示，其中子节点字段为children属性.

        第一个列是一个宽度为60的居中列，该列包含一个复选框。复选框的状态通过isFullChecked和isIndeterminate属性进行控制。在表头的部分，我们使用了一个插槽（slot="header"），并在插槽的内容中放置了一个全选的复选框（<el-checkbox>）。这样，当全选复选框的状态发生改变时，会触发checkAllChange方法。

        接下来，使用了一个作用域插槽（Scoped Slot）来渲染每一行数据的复选框。我们在属性绑定部分使用了slot-scope="scope"来引用插槽的作用域对象，这里命名为scope，并从scope中获取到当前渲染行的数据对象（row）。在插槽的内容中，我们判断row是否有子节点（v-if="row.children"），如果有子节点，则渲染一个复选框（<el-checkbox>）。复选框的状态同样通过row对象的属性进行控制，其中isIndeterminate表示不确定状态，checked表示选中状态。当复选框的状态发生变化时，会触发checkRowChange方法。

逻辑部分        

组件的数据:        

 data() {return {isFullChecked: false,isIndeterminate: false,loading: true,tableData: []}}
  • isFullChecked表示全选复选框的状态，默认为false。
  • isIndeterminate表示全选复选框的不确定状态，默认为false。
  • loading表示表格的加载状态，默认为true。
  • tableData表示表格的数据，初始时为空数组。

        在mounted()生命周期钩子中，调用了getList()方法来初始化表格数据：

 mounted() {this.getList()}

     getList()方法用于获取表格数据。在示例代码中，我们假设数据通过服务端接口获取，并将数据赋值给tableData属性。然后遍历tableData数组，为每个数据项添加checked和isIndeterminate属性，并初始化为false。最后，设置loading为false，用于结束加载状态。

 getList() {const tableData = [{id: 1,series: 'DDLC',children: [{id: 11,num: '1',name: 'monika',index: 0,},{id: 12,num: '2',name: 'nasuki',index: 1,},{id: 13,num: '3',name: 'sayori',index: 2,},{id: 14,num: '4',name: 'yuri',index: 3,}]},{id: 2,series: 'Bloom Into You',children: [{id: 21,num: '11',name: 'nanami',index: 0,},{id: 22,num: '12',name: 'yuu',index: 1,}]},];tableData.forEach(item => {item.checked = false;item.isIndeterminate = false;})this.tableData = tableData;this.total = this.tableData.length;this.loading = false;},

     watch属性，用来监听tableData属性的变化。当tableData发生变化时，会触发该监听函数。在这个监听函数中，我们将isFullChecked和isIndeterminate的状态重置为false，以确保全选复选框的状态正确更新：

 watch: {tableData() {this.isFullChecked = false;this.isIndeterminate = false;}}

        methods对象，定义了一些方法：

  • checkAllChange()方法用于处理全选复选框状态的改变。该方法首先定义了一个递归函数recursionSetChecked(item, checked)，用于设置数据项的checked状态和isIndeterminate状态。然后，通过遍历tableData数组，调用recursionSetChecked(item, this.isFullChecked)方法来设置每个数据项的状态。最后，设置isIndeterminate为false。
checkAllChange() {const recursionSetChecked = (item, checked) => {item.checked = checked;item.isIndeterminate = false;}this.isIndeterminate = false;this.tableData.forEach(item => recursionSetChecked(item, this.isFullChecked));}
  • checkRowChange(data)方法用于处理单个行复选框状态的改变。该方法首先切换数据项的checked状态，并定义了一个递归函数recursion(node)来处理子节点的isIndeterminate状态。接着，遍历tableData数组，调用recursion(item)方法来对每个节点进行处理。最后，根据表格数据的选中状态来更新全选复选框的状态（isFullChecked）和半选状态（isIndeterminate）。
  checkRowChange(data) {data.checked = !data.checked;const recursion = node => {if (node.children && node.children.length > 0)node.isIndeterminate = false;return node;};this.tableData.forEach(item => recursion(item));if (this.tableData.every(item => item.checked)) {this.isFullChecked = true;}else if (this.tableData.every(item => !item.checked)) {this.isFullChecked = false;}this.isIndeterminate = this.tableData.some(item => item.isIndeterminate)? true: this.tableData.some(item => !item.checked) && this.tableData.some(item => item.checked);}

完整代码

<template><div><el-tablev-loading="loading":data="tableData"style="width: 100%;margin: 20px;"row-key="id"borderdefault-expand-all:tree-props="{ children: 'children' }"><el-table-column width="60" align="center"><template slot="header" slot-scope="scope"><el-checkbox :indeterminate="isIndeterminate" v-model="isFullChecked" @change="checkAllChange"></el-checkbox></template><template slot-scope="{row}" v-if="row.children"><el-checkbox :indeterminate="row.isIndeterminate" :value="row.checked" @change="checkRowChange(row)"></el-checkbox></template></el-table-column><el-table-column prop="series" label="系列" align="center"></el-table-column><el-table-column prop="num" label="编号" align="center"></el-table-column><el-table-column prop="name" label="名字" align="center"></el-table-column></el-table></div>
</template><script>
export default {data() {return {isFullChecked: false,isIndeterminate: false,loading: true,tableData: []}},mounted() {this.getList()},watch: {tableData() {this.isFullChecked = false;this.isIndeterminate = false;}},methods: {getList() {const tableData = [{id: 1,series: 'DDLC',children: [{id: 11,num: '1',name: 'monika',index: 0,},{id: 12,num: '2',name: 'nasuki',index: 1,},{id: 13,num: '3',name: 'sayori',index: 2,},{id: 14,num: '4',name: 'yuri',index: 3,}]},{id: 2,series: 'Bloom Into You',children: [{id: 21,num: '11',name: 'nanami',index: 0,},{id: 22,num: '12',name: 'yuu',index: 1,}]},];tableData.forEach(item => {item.checked = false;item.isIndeterminate = false;})this.tableData = tableData;this.total = this.tableData.length;this.loading = false;},checkAllChange() {const recursionSetChecked = (item, checked) => {item.checked = checked;item.isIndeterminate = false;}this.isIndeterminate = false;this.tableData.forEach(item => recursionSetChecked(item, this.isFullChecked));},checkRowChange(data) {data.checked = !data.checked;const recursion = node => {if (node.children && node.children.length > 0)node.isIndeterminate = false;return node;};this.tableData.forEach(item => recursion(item));if (this.tableData.every(item => item.checked)) {this.isFullChecked = true;}else if (this.tableData.every(item => !item.checked)) {this.isFullChecked = false;}this.isIndeterminate = this.tableData.some(item => item.isIndeterminate)? true: this.tableData.some(item => !item.checked) && this.tableData.some(item => item.checked);}}
}
</script>

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

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

相关文章

线性代数(五) 线性空间

线性代数(五) 线性空间

前言 《线性代数(三) 线性方程组&向量空间》我通过解线性方程组的方式去理解线性空间。此章从另一个角度去理解 空间是什么 大家较熟悉的&#xff1a;平面直角坐标系是最常见的二维空间 空间由无穷多个坐标点组成 每个坐标点就是一个向量 反过来&#xff0c;也可说&…
阅读更多...
传统品牌如何通过3D虚拟数字人定制和动捕设备加速年轻化发展？

传统品牌如何通过3D虚拟数字人定制和动捕设备加速年轻化发展？

步入Z时代&#xff0c;年轻一代消费者的生活方式深受互联网技术和媒介环境影响&#xff0c;对新潮事物感兴趣&#xff0c;消费思维也相对前卫&#xff0c;品牌需要探索契合Z世代的消费观念&#xff0c;寻找新的链接拉近品牌与消费者的距离&#xff0c;而3D虚拟数字人定制可以帮…
阅读更多...
c#在MVC Api（.net framework）当中使用Swagger，以及Demo下载

c#在MVC Api（.net framework）当中使用Swagger，以及Demo下载

主要的步骤就是创建项目&#xff0c;通过nuget 添加Swashbuckle包&#xff0c;然后在SwaggerConfig当中进行相关的配置。 具体的步骤&#xff0c;可以参考下面的链接&#xff1a; https://www.cnblogs.com/94pm/p/8046580.htmlhttps://blog.csdn.net/xiaouncle/article/detail…
阅读更多...
macOS 安装 Homebrew 详细过程

macOS 安装 Homebrew 详细过程

文章目录 macOS 安装 Homebrew 详细过程Homebrew 简介Homebrew 安装过程设置环境变量安装 Homebrew安装完成后续设置(重要)设置环境变量homebrew 镜像源设置macOS 安装 Homebrew 详细过程 本文讲解了如何使用中科大源安装 Homebrew 的安装过程,文章里面的所有步骤都是必要的,需…
阅读更多...
ARM寄存器组

ARM寄存器组

CM3 拥有通用寄存器 R0‐R15 以及一些特殊功能寄存器。 R0-R7&#xff0c;通用目的寄存器 R0-R7也被称为低组寄存器&#xff0c;所有指令可以访问它们&#xff0c;它们的字长为32位&#xff0c;复位后的初始值是不可预料的。 R8-R12&#xff0c;通用目的寄存器 R8-R12也被称…
阅读更多...
【详解】文本检测OCR模型的评价指标

【详解】文本检测OCR模型的评价指标

关于文本检测OCR模型的评价指标 前言&#xff1a;网上关于评价标准乱七八糟的&#xff0c;有关于单词的&#xff0c;有关于段落的&#xff0c;似乎没见过谁解释一下常见论文中常用的评价指标具体是怎么计算的&#xff0c;比如DBNet&#xff0c;比如RCNN&#xff0c;这似乎好像…
阅读更多...
C语言的发展及特点

C语言的发展及特点

1. C语言的发展历程 C语言作为计算机编程领域的重要里程碑&#xff0c;其发展历程承载着无数开发者的智慧和创新。C语言诞生于20世纪70年代初&#xff0c;由计算机科学家Dennis Ritchie在贝尔实验室首次推出。当时&#xff0c;Ritchie的目标是为Unix操作系统开发一门能够更方便…
阅读更多...
LiveGBS伴侣

LiveGBS伴侣

【1】LiveGBS 简介 LiveGBS是一套支持国标(GB28181)流媒体服务软件。 国标无插件;提供用户管理及Web可视化页面管理&#xff1b; 提供设备状态管理&#xff0c;可实时查看设备是否掉线等信息&#xff1b; 实时流媒体处理&#xff0c;PS&#xff08;TS&#xff09;转ES&…
阅读更多...
2023.8.28日论文阅读

2023.8.28日论文阅读

文章目录 NestFuse: An Infrared and Visible Image Fusion Architecture based on Nest Connection and Spatial/Channel Attention Models(2020的论文)本文方法 LRRNet: A Novel Representation Learning Guided Fusion Network for Infrared and Visible Images本文方法学习…
阅读更多...
分析型CRM的优缺点有哪些？

分析型CRM的优缺点有哪些？

CRM系统根据其功能和目标的不同&#xff0c;可以分为三种主要类型&#xff1a;运营型CRM、分析型CRM和协作型CRM。本文将进行分析型CRM系统的优缺点分析&#xff0c;帮助您对分析型CRM系统有更深的了解。 什么是分析型CRM系统&#xff1f; 例如Zoho CRM的分析型CRM系统是指通…
阅读更多...
Redis的数据结构与单线程架构

Redis的数据结构与单线程架构

"飞吧&#xff0c;去寻觅红色的流星" Redis中的五种数据结构和编码 Redis是一种通过键值对关系存储数据的软件&#xff0c;在前一篇中&#xff0c;我们可以使用type命令实际返回当前键所对应的数据结构类型&#xff0c;例如: String\list\hash\set等等。 但…
阅读更多...
linux字符串处理

linux字符串处理

目录 1 C 截取字符串,截取两个子串中间的字符串2 获取该字符串后面的字符串用 strstr() 函数查找需要提取的特定字符串&#xff0c;然后通过指针运算获取该字符串后面的字符串用 strtok() 函数分割字符串&#xff0c;找到需要提取的特定字符串后&#xff0c;调用 strtok() 传入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023