vue.js element-ui 트리 트리 컨트롤을 iview로 변경하는 방법-JS 튜토리얼-php.cn

vue.js element-ui 트리 트리 컨트롤을 iview로 변경하는 방법

亚连

풀어 주다： 2018-05-29 15:12:06

원래의

2421명이 탐색했습니다.

이 글에서는 주로 vue.js 요소-ui 트리 트리 컨트롤을 iview로 변경하는 방법을 소개하고 참고하겠습니다.

element-ui 컴포넌트의 트리 컨트롤이 소스코드에서 iview 컴포넌트로 수정되었습니다

구현원리

element-ui 소스코드를 수정하고 소스코드에서 트리 모듈을 추출했습니다

그런 다음 수정합니다 Element와 함께 제공되는 checkbox 다른 구성 요소는 iview의 checkbox이며 메소드와 호환됩니다

최종적으로 요소 스타일을 수정하고 iview 스타일로 변경하고 일부 스타일을 직접 추가했습니다

새 트리 구성 요소라고 할 수 있습니다 iview

<template>
 <p
  @click.stop="handleClick"
  v-show="node.visible">
  <p class="chu-tree-node__content"
   :style="{ &#39;padding-left&#39;: (node.level - 1) * tree.indent + &#39;px&#39; }">
   <span :class="arrowClasses" @click.stop="handleExpandIconClick">
     <Icon v-if="!node.isLeaf" type="arrow-right-b"></Icon>
   </span>
   <Checkbox
    v-if="showCheckbox"
    :value="node.checked"
    :indeterminate="node.indeterminate"
    :disabled="!!node.disabled"
    @click.native.stop
    @on-change="handleCheckChange"></Checkbox>
   <span
    v-if="node.loading"
    class="ivu-load-loop">
   </span>
   <node-content :node="node"></node-content>
  </p>
  <collapse-transition>
   <p
    v-show="expanded">
    <el-tree-node
     :render-content="renderContent"
     v-for="child in node.childNodes"
     :key="getNodeKey(child)"
     :node="child"
     @node-expand="handleChildNodeExpand">
    </el-tree-node>
   </p>
  </collapse-transition>
 </p>
</template>

로그인 후 복사

Modify handlerCheckChange 스타일의 요소 로직이 되려면 iview의 체크박스 구성 요소 로직이 다르고 함수 반환도 다르기 때문에

로 추출한 후 프로젝트 구조와 호환되어야 합니다.

handleCheckChange(ev) {
    this.node.setChecked(ev, !this.tree.checkStrictly);
   },

로그인 후 복사

, npm 플러그인으로 패키징

사용방법

iview

스타일을 설치해야 합니다. 스타일은 모두 ivew

로 대체되었습니다. 기능은 모두 원래 요소와 동일합니다. -ui

npm i chu-tree-iview

로그인 후 복사

import chuView from &#39;chu-tree-iview&#39;

Vue.use(chuView)

<chu-tree></chu-tree>

로그인 후 복사

위 내용은 앞으로 모든 분들에게 도움이 되기를 바랍니다.