el-tree 的样式改变

<el-tree

            ref="permissionTree"

            :data="permissions"

            node-key="id"

            :show-checkbox="!isDetail"

            :render-after-expand="false"

            :default-expanded-keys="expandedPremission"

            :props="defaultProps"

          >

            <div

              slot-scope="{ node, data }"

              :class="[

                data.type === 2 && !hasPermission(data.id) && isDetail

                  ? 'disabled'

                  : '',

                data.type === 2 ? 'horizontal-node' : ''

              ]"

              :style="{ marginRight: '10px' }"

            >

              <svg-icon

                v-if="data.type === 2 && isDetail"

                :iconClass="hasPermission(data.id) ? 'enable' : 'disabled'"

                class="lock"

              />

              <svg-icon

                v-if="data.type === 1 && isDetail"

                :iconClass="

                  hasChildrenPermission(data.children) ? 'unlock' : 'lock'

                "

                class="lock"

              />

              {{ node.label }}

            </div>

          </el-tree>

改变node样式，成水平格局

 changeTreeStyle() {

      const leafNodes = document.getElementsByClassName('horizontal-node')

      for (let i = 0; i < leafNodes.length; i++) {

        leafNodes[i].parentNode.parentNode.style.float = 'left'

        leafNodes[i].parentNode.style.backgroundClip = 'content-box'

      }

    }