ztree之vue-giant-tree展开折叠图标隐藏

ztree之vue-giant-tree展开折叠图标隐藏

选项设置

setingTree: {

        check: {

          enable: true

        },

        data: {

          simpleData: {

            enable: true,

            idKey: 'id',

            pIdKey: 'parentId'

          },

          key: {

            children: 'childList',

            checked: 'checked'

          }

        },

        view: {

          showIcon: false,

          showLine: false

        }

      },

重写样式

      .treeClass {

        li {

          .checkbox_false_part {

            border-color: #3399FF;

            background-color: #3399FF;

            &::after {

              position: absolute;

              content: '';

              top: 5px;

              left: 2px;

              width: 10px;

              height: 1px;

              transform: rotate(0deg) scale(1);

              border-right: 0;

              border-bottom: 2px solid #FFFFFF;

            }

          }

          .switch {

            &::before {

              width: 4px;

              height: 4px;

              border: 1px solid #666666;

              border-right: none;

              border-top: none;

              transform-origin: 25% 50%;

            }

          }

          .bottom_open, .center_open, .roots_open, .noline_open {

            &::before {

              transform: rotate(-45deg) scale(1.5);

            }

          }

          .bottom_close, .center_close, .roots_close, .noline_close {

            &::before {

              transform: rotate(-135deg) scale(1.5);

            }

          }

          .bottom_docu, .center_docu, .roots_docu, .noline_docu {

            &::before {

              display: none;

            }

          }

        }

      }

数据处理

// tree结构和关联input回显

    treeEcho(checkList, length, tree, inputArr, type) {

      tree.map((item, i) => {

        if (Array.isArray(item.childList) && !item.childList.length) {

          item.childList = null;

        }

      });

      if (!length || !tree.length) return;

      tree.some((item) => {

        if (checkList.includes(item.code)) {

          item.checked = true;

          inputArr.push(item.name);

          // 凑齐了

          if (inputArr.length >= length) {

            this.changeInput(type, inputArr);

            return true;

          }

        }

        if (item.childList && item.childList.length) {

          this.treeEcho(checkList, length, item.childList, inputArr, type);

        }

      });

    },

渲染view

<Select style="width:500px">

            <z-tree

              :nodes="deviceList"

              class="treeClass"

              :setting="setingTree"

              @onCheck="onCheckDeviceTree"

              @onCreated="handleCreatedDeviceTree"

            />

发表评论

电子邮件地址不会被公开。 必填项已用*标注