vue.js element-ui tree樹形控件改iview的方法
element-ui組件的tree樹形控件修改源碼改為iview組件
實(shí)現(xiàn)原理
修改了element-ui源碼，把源碼里面的tree模塊提取出來
然后修改element自帶checkbox等組件為iview的checkbox，并且兼容方法
最后修改element樣式，改為iview風(fēng)格，自己也添加了一些樣式
新的tree組件可以說是element的邏輯，iview的風(fēng)格
<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，因?yàn)閕view的checkbox組件邏輯不同，函數(shù)的返回不一樣，需要兼容
handleCheckChange(ev) {
this.node.setChecked(ev, !this.tree.checkStrictly);
},
提取完成后的項(xiàng)目結(jié)構(gòu)，以及封裝成npm插件
使用方法
必須安裝iview
樣式風(fēng)格全部替換成了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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
nuxt 每個(gè)頁面head標(biāo)簽內(nèi)容設(shè)置方式
這篇文章主要介紹了nuxt 每個(gè)頁面head標(biāo)簽內(nèi)容設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
laravel+vue組合的項(xiàng)目中引入ueditor方式(打包成組件形式)
今天小編就為大家分享一篇laravel+vue組合的項(xiàng)目中引入ueditor方式(打包成組件形式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
基于Vue3.0開發(fā)輕量級(jí)手機(jī)端彈框組件V3Popup的場景分析
這篇文章主要介紹了基于Vue3.0開發(fā)輕量級(jí)手機(jī)端彈框組件V3Popup,本文通過場景分析給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了讓Vue也可以使用Redux的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue項(xiàng)目使用.env文件配置全局環(huán)境變量的方法
這篇文章主要介紹了vue項(xiàng)目使用.env文件配置全局環(huán)境變量的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue攔截器Vue.http.interceptors.push使用詳解
這篇文章主要為大家詳細(xì)介紹了vue攔截器Vue.http.interceptors.push的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue中數(shù)組常用的6種循環(huán)方法代碼示例
在vue項(xiàng)目開發(fā)中,我們需要對(duì)數(shù)組進(jìn)行處理等問題,這里簡單記錄遍歷數(shù)組的幾種方法,這篇文章主要給大家介紹了關(guān)于vue中數(shù)組常用的6種循環(huán)方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue?前端路由工作原理hash與history的區(qū)別
這篇文章主要介紹了Vue?前端路由工作原理hash與history的區(qū)別，文章圍繞主題展開vue-router的工作原理的簡單介紹，感興趣的朋友可以學(xué)習(xí)一下2022-07-07
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個(gè)常見的需求,Vue 提供了多種方法來實(shí)現(xiàn)這一目標(biāo),包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來學(xué)習(xí)一下這些方法的具體實(shí)現(xiàn)吧2023-12-12