vue.js element-ui tree樹形控件改iview的方法

更新時間：2018年03月29日 14:16:26 作者：儲某某

這篇文章主要介紹了vue.js element-ui tree樹形控件改iview的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

element-ui組件的tree樹形控件修改源碼改為iview組件

實現(xiàn)原理

修改了element-ui源碼，把源碼里面的tree模塊提取出來

然后修改element自帶checkbox等組件為iview的checkbox，并且兼容方法

最后修改element樣式，改為iview風格，自己也添加了一些樣式

新的tree組件可以說是element的邏輯，iview的風格

<template>
 <div
  @click.stop="handleClick"
  v-show="node.visible">
  <div class="chu-tree-node__content"
   :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
   <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>
  </div>
  <collapse-transition>
   <div
    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>
   </div>
  </collapse-transition>
 </div>
</template>

修改handleCheckChange，因為iview的checkbox組件邏輯不同，函數(shù)的返回不一樣，需要兼容

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

提取完成后的項目結(jié)構(gòu)，以及封裝成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一模一樣

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

nuxt 每個頁面head標簽內(nèi)容設置方式
這篇文章主要介紹了nuxt 每個頁面head標簽內(nèi)容設置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
laravel+vue組合的項目中引入ueditor方式(打包成組件形式)
今天小編就為大家分享一篇laravel+vue組合的項目中引入ueditor方式(打包成組件形式)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
基于Vue3.0開發(fā)輕量級手機端彈框組件V3Popup的場景分析
這篇文章主要介紹了基于Vue3.0開發(fā)輕量級手機端彈框組件V3Popup,本文通過場景分析給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-12-12
讓Vue也可以使用Redux的方法
這篇文章主要介紹了讓Vue也可以使用Redux的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
vue項目使用.env文件配置全局環(huán)境變量的方法
這篇文章主要介紹了vue項目使用.env文件配置全局環(huán)境變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
vue攔截器Vue.http.interceptors.push使用詳解
這篇文章主要為大家詳細介紹了vue攔截器Vue.http.interceptors.push的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
vue+elementui實現(xiàn)拖住滑塊拼圖驗證
這篇文章主要為大家詳細介紹了vue+elementui實現(xiàn)拖住滑塊拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue中數(shù)組常用的6種循環(huán)方法代碼示例
在vue項目開發(fā)中,我們需要對數(shù)組進行處理等問題,這里簡單記錄遍歷數(shù)組的幾種方法,這篇文章主要給大家介紹了關(guān)于vue中數(shù)組常用的6種循環(huán)方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-03-03
Vue?前端路由工作原理hash與history的區(qū)別
這篇文章主要介紹了Vue?前端路由工作原理hash與history的區(qū)別，文章圍繞主題展開vue-router的工作原理的簡單介紹，感興趣的朋友可以學習一下
2022-07-07
vue中組件傳值的常見方式小結(jié)
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個常見的需求,Vue 提供了多種方法來實現(xiàn)這一目標,包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來學習一下這些方法的具體實現(xiàn)吧
2023-12-12