vue+element-ui树形表格+复选框（实现复选框的各种效果）

最新推荐文章于 2024-06-23 19:45:10 发布

Tony_ET

最新推荐文章于 2024-06-23 19:45:10 发布

阅读量4.2k

点赞数 2

分类专栏：随笔文章标签： vue checkbox js javascript es6

本文链接：https://blog.csdn.net/Tony_ET/article/details/113108447

版权

本文介绍了如何在Vue项目中结合Element-UI的树形表格和复选框功能，实现全选、子节点选中、父子节点联动等逻辑。通过在表格中插入复选框并绑定事件，利用数据驱动完成各项操作，包括遍历树形结构以处理全选和子节点选中等复杂场景。

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

需求

项目的需求是给角色分配菜单，菜单会有子集，所以后台反给我的是带children的树形数据，但是添加的时候可能是一次性选很多的菜单，多选就不能直接用elemengt自带的多选，所以用了表格树形和复选框的组合，复选框用了插槽，完成了一些列的逻辑

代码块

表格部分

视图层
table中加入树形 :tree-props="{children: 'children'}"
插入两个复选框，一个是表头的，一个是表身<el-checkbox>绑定对应的v-model，还有对应的事件，后边写对应的逻辑

<el-dialog title="菜单分配" append-to-body center show-close :visible.sync="dialogMenuVisible" @open="handleOpening" @close="handleClosing">
      <el-table
        ref="multipleTable"
        :data="menuData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children'}"
      >
        <el-table-column width="105">
          <template slot="header" slot-scope="scope">
            <span>全选</span>
            <el-checkbox v-model="checkouts" style="padding-left:10px