트리 컨트롤을 사용하여 iview를 수정하는 단계 지침

이번에는 트리 제어로 iview를 수정하는 방법을 단계별로 알려드리겠습니다. 트리 제어로 iview를 수정하는 경우 주의 사항은 무엇입니까?

구현원리

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>

믿거나 말거나 이 글의 사례를 읽고 나면 방법을 익혔을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목하세요. !

추천 자료:

vue는 검색 목록 콘텐츠를 구현합니다

axios를 사용하여 게시물 요청을 보내고 이미지 양식을 제출하는 단계별 자세한 설명

위 내용은 트리 컨트롤을 사용하여 iview를 수정하는 단계 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!