elementui table树形多选、半选、全选解决方案

最新推荐文章于 2025-06-19 22:26:51 发布

原创

最新推荐文章于 2025-06-19 22:26:51 发布 · 3.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

本文介绍了如何在ElementUI的Table组件中实现树形结构的多选、半选和全选功能。通过JS代码示例，详细解析了实现这些功能的关键步骤和注意事项。

<el-table
    ref="table"
    :data="tableData"
    style="margin-top: 20px"
    row-key="ID"
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    :row-class-name="rowClassNameFun"
    @select="select"
    @select-all="selectAll">
  <el-table-column type="selection" width="50"></el-table-column>

// JS部分

// 初始化数据,将数据都用isSelect标记一下，isSelect为false不选中、true选中、half半选  添加子集的父级ID
initData (data) {
  data.forEach((item) => {
    item.isSelect = false // 默认为不选中
    if (item.children && item.children.length > 0) {
      item.children.forEach(children => {
        children.parentID = item.ID
      })
    }
  })
},
//半选样式选择
rowClassNameFun ({ row }) {
  if (row.isSel