집 >웹 프론트엔드 >JS 튜토리얼 >vue.js element-ui 트리 트리 제어를 작동하여 iview를 변경하는 방법

vue.js element-ui 트리 트리 제어를 작동하여 iview를 변경하는 방법

php中世界最好的语言원래의: 2018-05-26 10:49:471559검색

이번에는 vue.js element-ui 트리 트리 컨트롤을 iview로 변경하는 방법과 vue.js element-ui 트리 트리 컨트롤을 실행하여 iview를 변경할 때 어떤 Notes가 있는지 보여드리겠습니다. 실제 사례, 함께 살펴보겠습니다.

구현원리

element-ui 소스코드 수정, 소스코드에서 트리 모듈 추출

그런 다음 해당 요소의 자체 체크박스와 기타 컴포넌트를 iview의 체크박스로 수정하고 호환 가능하게 만듭니다.

마지막으로 요소 스타일 수정 iview 스타일에 몇 가지 스타일도 직접 추가했습니다

새 트리 구성 요소는 요소의 논리, iview의 스타일이라고 할 수 있습니다

<template>
 <p
  @click.stop="handleClick"
  v-show="node.visible">
  <p class="chu-tree-nodecontent"
   :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로 대체됩니다.

기능은 모두 element-ui와 동일합니다

npm i chu-tree-iview

import chuView from 'chu-tree-iview'
Vue.use(chuView)
<chu-tree></chu-tree>

사용 설명서 element-ui와 완전히 동일합니다

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!