vue element UI表格树全选不选择二级以下bug

Jeff.ts

于 2020-03-17 16:05:37 发布

阅读量2.6k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue javascript 前端

本文链接：https://blog.youkuaiyun.com/jeff__liu/article/details/104924176

本文介绍了在Vue Element UI中处理表格树形结构全选时遇到的问题，包括点击全选按钮使所有层级选中或非选中，以及点击父节点影响子节点选中状态的实现。通过在type='selection'的列上添加自定义插槽，并增加isRowClick和isAllSelectClick变量来控制点击事件。虽然当前实现可能存在性能问题，但希望能为其他开发者提供参考。

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

vue element UI表格树全选不选择二级以下

可能也有别的小伙伴跟我遇到同样的bug,可惜百度了一圈也没找到合适的解决办法，所以就自己改造了下跟各位分享，暂时已经满足我们这个产品的需求，还可以根据场景进一步更新，话不多说直接上代码

需求：
1点击全选时一级和以下全部为选中或非选中状态
2点击父节点子节点全部为选中或非选中状态

<el-table
          v-loading="loading"
          :data="tableData"
          row-key="treeId"
          height="100%"
          border
          :class="'mytables'"
          ref="multipleTable"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          :header-cell-style="{'background-color': '#F6F6F6','font-weight':'600','color': '#333','height':'20px'}"
          @selection-change="handleSelectionChange"//注意这里
        >
          <el-table-column type="selection" width="55">

            <template slot-scope="scope">//改造后的
               <el-checkbox v-model="scope.row.checks" @change="toselect(scope.row)"></el-checkbox>
            </template>
          </el-table-column>