<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

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

        來源:懂視網 責編:小采 時間:2020-11-27 22:17:17
        文檔

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

        vue.js element-ui tree樹形控件改iview的方法:element-ui組件的tree樹形控件修改源碼改為iview組件 實現原理 修改了element-ui源碼,把源碼里面的tree模塊提取出來 然后修改element自帶checkbox等組件為iview的checkbox,并且兼容方法 最后修改element樣式,改為iview風格,自己也添加了
        推薦度:
        導讀vue.js element-ui tree樹形控件改iview的方法:element-ui組件的tree樹形控件修改源碼改為iview組件 實現原理 修改了element-ui源碼,把源碼里面的tree模塊提取出來 然后修改element自帶checkbox等組件為iview的checkbox,并且兼容方法 最后修改element樣式,改為iview風格,自己也添加了

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

        實現原理

        修改了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組件邏輯不同,函數的返回不一樣,需要兼容

        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>
        

        使用文檔跟element-ui一模一樣

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

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

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

        vue.js element-ui tree樹形控件改iview的方法:element-ui組件的tree樹形控件修改源碼改為iview組件 實現原理 修改了element-ui源碼,把源碼里面的tree模塊提取出來 然后修改element自帶checkbox等組件為iview的checkbox,并且兼容方法 最后修改element樣式,改為iview風格,自己也添加了
        推薦度:
        標簽: VUE vue.js element-ui
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲狠狠狠一区二区三区| 国产成人亚洲综合无码精品| 三年片免费高清版 | 日本一线a视频免费观看| 亚洲人成网网址在线看| 免费做爰猛烈吃奶摸视频在线观看| 亚洲福利秒拍一区二区| 国产人成免费视频网站| 亚洲性一级理论片在线观看| 最近免费中文字幕大全免费版视频| 亚洲激情中文字幕| 91免费国产自产地址入| 亚洲欧洲视频在线观看| 中文字幕无码不卡免费视频| 中文字幕在线观看亚洲视频| 我想看一级毛片免费的| 国产成人亚洲精品播放器下载| 亚洲第一网站男人都懂| 免费毛片在线看不用播放器| 亚洲黄网在线观看| www.999精品视频观看免费| 亚洲国产精品无码久久九九大片| 啊v在线免费观看| 国产色爽免费无码视频| 亚洲国产精品成人综合久久久 | 免费乱码中文字幕网站| 一个人免费观看视频在线中文 | 亚洲精品午夜国产VA久久成人| 野花香在线视频免费观看大全 | 高清在线亚洲精品国产二区| a级男女仿爱免费视频| 亚洲av一本岛在线播放| 国产免费av一区二区三区| 人妻免费一区二区三区最新| 亚洲精品乱码久久久久久下载| 色吊丝永久在线观看最新免费| 中文字幕的电影免费网站| 亚洲天堂一区二区三区| 亚洲第一区精品观看| 亚洲免费观看在线视频| 一区视频免费观看|