tree组件的一些.

最新推荐文章于 2024-08-24 09:42:43 发布

zongzi_494

最新推荐文章于 2024-08-24 09:42:43 发布

阅读量190

点赞数 1

本文链接：https://blog.csdn.net/zongzi494/article/details/119416447

版权

本文介绍了如何使用Element UI的el-tree组件实现树形结构的选择、状态管理以及节点过滤功能，包括数据绑定、默认勾选、事件处理（handlecheck2和check）以及数组操作（removeAaary）。重点展示了节点状态切换和过滤逻辑的实现。

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

tree组件的一些...


      <el-tree
        ref="trees"
        class="h-100 page-tree_body-list"
        :filter-node-method="filterNode"
        node-key="phone"
        :default-checked-keys="keylist"
        :data="userTreeList"
        :props="TreeProp2"
        show-checkbox
        @check-change="handlecheck2"
        @check="check"
      ></el-tree>

      userTreeList: [],
      keylist: [],  //默认勾选的数组 要设置Node-key
      selectList: [],
      内部节点树形结构配置选项
      TreeProp2: {
        label: "userName",
      },


 勾选了tree后触发的事件
勾选当前节点，会有当前节点的信息，已经check的true或false的状态
    handlecheck2(data, data2, data3) {
       console.log(data, data2);

       if (data2 == true) {
         this.selectList.push(data);
       } else {
         if (this.selectList && this.selectList.length) {
         this.selectList = this.removeAaary(this.selectList, data)
       }
      }
      console.log(this.selectList);
    },



    
   这个方法会出现当前已勾选节点，或者半节点的状态
    check(data, node) {
      console.log(data, node);
      this.selectList = [...node.checkedNodes, ...node.halfCheckedNodes]
      console.log(this.selectList);
    },







   删除数组中的某一个对象
    _arr:数组
    _obj:需删除的对象
    
    removeAaary(_arr, _obj) {
      var length = _arr.length;
      for (var i = 0; i < length; i++) {
        if (_arr[i] == _obj) {
          _arr.splice(i, 1); //删除下标为i的元素
          return _arr;
        }
      }
    },   




      节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.nodeName.indexOf(value) !== -1;
    },