element table element树列表默认选中父节点默认勾选子节点

最新推荐文章于 2024-05-11 16:37:28 发布

代小二啊

最新推荐文章于 2024-05-11 16:37:28 发布

阅读量4.7k

点赞数 3

分类专栏： JavaScript vue element 文章标签：前端 element 树列表

本文链接：https://blog.csdn.net/weixin_42091613/article/details/103635859

版权

这篇博客介绍了如何在Element UI的表格组件中实现树列表功能，当父节点被选中时，其子节点会默认被勾选。内容涉及到表格HTML代码的编写以及两个关键方法——`@select`（处理复选框点击事件）和`@row-click`（处理行点击事件）的实现，展示了前端开发中树形数据的交互处理技巧。

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

表格html代码：

定义两个方法
@select//方法是点击复选框的触发事件
@row-click//点击行

<el-table
      border
      :data="ProductTypes"
      height="100%"
      row-key="id"
      node-key="id"
      stripe
      tooltip-effect="dark"
      @row-click="currentRow"
      ref="ProductTypes"
      default-expand-all
      @select="handleSelectionChange"
      element-loading-text="数据加载中"
      v-loading="loadtree"
      :class="this.store.state.cdb.common.tableClass"
      :header-row-class-name="this.store.state.cdb.common.tableTitleClass"
      :tree-props="{ children: 'children', hasChildren: 'isend'}"
      size="mini"
    >
      <el-table-column
        size="mini"
        label="序号"