针对Avue、ElementUI框架的表格树，全选多选勾选子节点的问题完善

是栀子吖

已于 2023-10-30 13:35:36 修改

阅读量4.3k

点赞数 3

分类专栏： avue 文章标签： elementui vue.js javascript

于 2022-02-24 14:28:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40682410/article/details/123109993

版权

本文介绍了如何在基于avue框架的表格树中实现父子节点选中状态相互关联的多选功能。通过使用`@select`和`@select-all`事件，结合`toggleSelection`方法，实现了在选中或取消选中父节点时，其子节点的同步操作。同时，文章提供了详细的代码示例，展示了如何处理选中和取消选中状态，并在加载子树时保持选中状态的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，ElementUi的表格树只有单层级的单选多选的功能，树形父子关系不相互关联，那么如何实现表格树选中时父子关系上下关联呢，下面上代码。（注：本代码是基于avue框架的，所以代码结构上是avue风格，不过多选功能ElementUI是完全适用的，毕竟avue就是ElementUI基础上产出的）

用到了这两个方法
@select=“select”
@select-all=“selectAll”

<template>
  <div>
    <basic-container>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        v-model="form"
        ref="crud"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @selection-change="selectionChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
        @tree-load="treeLoad"
        class="HautoTable"
        @select="select"
        @select-all="selectAll"
      >
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
    export default {
   
        data() {
   
            return {
   
                query: {
   },
                loading: true,
                parentId: 0,
                selectionList: [],
                option: {
   
                    labelWidth: 150,
                    index: false,
                    lazy: true,
                    rowKey: "id",
                    defaultExpandAll: false,
                    searchShow: false,
                    searchMenuSpan: 5,
                    border: true,
                    viewBtn: false,
                    dialogClickModal: false,
                    menu: false,
                    searchSpan: 6,
                    searchGutter: 0,
                    searchLabelWidth: 100,
                    selection:

最低0.47元/天解锁文章