VXE-TreeGrid checkbox取消父子关联

最新推荐文章于 2023-12-26 19:05:34 发布

Teln_小凯

最新推荐文章于 2023-12-26 19:05:34 发布

阅读量596

点赞数

分类专栏： VUE 文章标签： servlet 前端 javascript

本文链接：https://blog.csdn.net/qq873113580/article/details/126369728

版权

VUE 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在前端表格中实现取消父子关联并开启表头权限的功能，同时详细阐述了全选和单选之间的联动效果。通过设置`checkbox-config`属性和监听`checkbox-all`及`checkbox-change`事件，实现了全选按钮状态的控制以及单个选中项与全选状态的同步。在页面加载时，默认全选按钮处于未勾选状态。

摘要由CSDN通过智能技术生成

效果图

1、取消父子关联+开启表头权限

:checkbox-config="{ checkStrictly: true, showHeader: true }"

2、全选和下面单选的联动

@checkbox-all="checkALL"

@checkbox-change="checkChange"

//全选
    checkALL({ checked }) {
      for (var row of this.tableData) {
        this.$refs.xTree.setCheckboxRow(row, checked);
      }
    },
    //其他勾选事件
    checkChange() {
      var checkCount = this.$refs.xTree.getCheckboxRecords(true).length;
      if (checkCount == this.tableData.length) {
        this.$refs.xTree.setAllCheckboxRow(true);
      } else {
        this.$refs.xTree.setAllCheckboxRow(false);
      }
    },

3、默认页面加载全选按钮去掉勾选