elementUI Tree树形结构复选框

最新推荐文章于 2025-10-25 14:18:03 发布

原创最新推荐文章于 2025-10-25 14:18:03 发布 · 929 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue应用中使用Element UI的el-tree组件，展示了如何处理节点的勾选状态，包括默认选中、回显以及改变时的数组更新。重点讲解了handleCheckChange方法和checkedArray的管理。

html

 <el-tree
  :data="grantData"
     show-checkbox
     node-key="id"
     :default-checked-keys="checked"
     :props="defaultProps"
     accordion
     @check="handleCheckChange"
   >
   </el-tree>

data

  defaultProps: {  // 规定显示项
   	 children: "children",
     label: "title",
   },
   grantData: [],  // 树显示
   checked: [],   //  用于回显使用
   checkedArray:[]  // 选中的节点组成的数组

methods

 handleCheckChange(data, checked) {
 		// checkedArray 为拿到的选中的数组
      this.checkedArray = checked.halfCheckedKeys.concat(checked.checkedKeys);
    },