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

이 글에서는 주로 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 'chu-tree-iview'

Vue.use(chuView)

<chu-tree></chu-tree>

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

관련 기사:

숫자 유형 배열에서 가장 큰 요소를 찾는 JS 방법

vuex 프로젝트 구조 디렉터리 및 몇 가지 간단한 구성 소개

vue2.0 자산 파일 간의 차이점에 대한 자세한 설명 및 정적 리소스 파일

위 내용은 vue.js element-ui 트리 트리 컨트롤을 iview로 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!