vue.js+element-ui 트리 컨트롤을 사용하여 iview를 수정하는 단계에 대한 자세한 설명

이번에는 vue.js+element-ui 트리 컨트롤로 iview를 수정하는 방법을 단계별로 자세히 알려드립니다. vue.js+로 iview를 수정할 때 주의해야 할 주의사항은 무엇인가요? element-ui 트리 컨트롤 다음은 실제 사례입니다. 함께 살펴보겠습니다.

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

구현 원리

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

그런 다음 Element 자체를 수정합니다. checkbox 및 기타 컴포넌트 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>

handCheckChange를 수정하세요. 왜냐하면 체크박스 구성요소의 논리가 다르고 함수의 반환도 다르기 때문입니다.

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>

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

http://element-cn.eleme.io/#/zh-CN/comComponent/tree

이 글을 읽어보셨을 거라 믿습니다. 이 글의 경우에는 더 흥미로운 방법을 익히셨습니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 주세요!

추천 자료:

Yuansheng JS는 파일 드래그 앤 드롭 이벤트를 구현합니다

vue

의 전역 로컬 구성 요소 사용에 대한 자세한 설명

위 내용은 vue.js+element-ui 트리 컨트롤을 사용하여 iview를 수정하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!