vue + html 編寫仿element select 多選組件

Enlightenment 發布于2019-08-23 14:23 / 3417人閱讀

摘要：現在做項目主要用的框架差不多都是，但是每個項目設計的不同難免和組件產生差異甚至是大不相同，有的時候差異少比如頁面樣式不太相同，功能使用完全一樣的話，這樣改改樣式就可以了，但是要大部分不同，而且改出來之后和設計稍差的話就可以自己來寫了。。。

現在做vue項目主要用的ui框架差不多都是elementui，但是每個項目設計的不同難免和element組件產生差異甚至是大不相同，有的時候差異少比如頁面樣式不太相同，功能使用完全一樣的話，這樣改改樣式就可以了，但是要大部分不同，而且改出來之后和設計稍差的話就可以自己來寫了。。。

編寫一下select樹形結構且多選組件，遞歸循環樹形結構數據，無需定義其他關聯鍵值

樹形數據，幾級都可以
List: [ // 部門數據

 { value: "河北省",
   children: [
         { value: "唐山市區",
           children: [
                 { value: "A區",
                   children: [ { value: "111" } ]
                 },
                 { value: "B區", children: [ { value: "222" } ]
                 },
                 { value: "C區", children: [ { value: "3333" } ]
                 },
             ]
         },
         { value: "灤縣區", children: [ { value: "44444" } ]
 }

]

遞歸循環添加id 層級，相當于加一個標志符

 this.departmentList.map((item,index) => {
     item.id = 0;
     item.children && this.checkChild(item.children,item.id);
 })

拿到自己要渲染的數組

    // 點擊選項添加數據
    change (val, value, index) {
        // 獲取數據內的層級id
        let id =val.id
        // 提前創建好二維數組防止報錯，后面會進行空數組的清空操作
        this.all.push([])
        this.all[this.num].splice(id, 0, val)
        // 用戶點擊之后是否有子數據，有的話加入Renderingarr渲染子數據，開啟限制
        if(val.children) {
            this.renderingArr.push(val)
            this.isOpenFirst = true
        }
        // 提前創建盛放已選內容的二維數組，功能和all一樣
        this.selectedValue.push([])
        this.selectedValue[this.num].splice(id, 1 , { value, id, num: this.num })
        // this.selectArr.splice(this.num,1, [this.value[this.num][this.value[this.num].length-1]])
        // 存儲每個已選的最后一位作為tag
        this.selectArr.splice(this.num, 1, this.selectedValue[this.num][this.selectedValue[this.num].length-1].value)
    }

云服務器 GPU云服務器多選select element-ui dialog組件 vue組件 vue組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100527.html

Vue.js Guide Essentials-說人話-速記版

摘要：以下內容根據部分速記。同時，需要在父組件標簽中添加這個屬性，該屬性才能傳遞到子組件內。把父組件傳遞的數據當做子組件的初始值。以下內容根據Vue.js Guide Essentials部分速記。不含動畫/mixin/SSR/路由/狀態管理等部分. Introduction 建議閱讀原文 https://vuejs.org/v2/guide/in... 什么是Vue 開始聲明式...

Sanchi 2019-08-21 18:38 評論0 收藏0
element ui中的select多選回顯之后不能正常編輯

摘要：由于項目需求，在項目中使用用到了中的組件的多選功能，多選之后保存回顯所選內容，從后端會拿到一個數組，然后我把這個數組賦值給前端多選對應的數組，這樣多選的數據可以正常顯示問題是回顯之后不能正常編輯，點擊刪除小圖標也失效解決方法采用事件在事件中由于項目需求，在項目中使用用到了element中的select組件的多選功能（multiple），多選之后保存回顯所選內容，從后端會拿到一個數組，...

dockerclub 2019-08-23 18:20 評論0 收藏0
Vue高效UI組件庫—iView開發實踐

摘要：它的文檔也是相當詳細，每個功能都配有詳細說明和實例代碼，直接復制就可以使用，我們也計劃在明年啟動英文文檔翻譯計劃。明年會啟動英文文檔翻譯計劃，也希望喜歡和支持，同時英語不錯的同學可以加入我們，一起參與翻譯。前段時間在微軟參加活動，分享了 TalkingData 開源的基于 Vue.js 的高效 UI 組件庫 iView 的一些開發經驗，現整理成文，和大家探討。 showImg(htt...

wean 2019-08-21 14:43 評論0 收藏0
vue表格組件

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。非必設項，選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridM...

ysl_unh 2019-08-26 12:10 評論0 收藏0
一個vue的日歷組件

一個vue calendar的npm組件說明： 1.基于element-ui開發的vue日歷組件。 showImg(https://segmentfault.com/img/remote/1460000015420326?w=507&h=472); 地址更新: 1.增加value-format指定返回值的格式2.增加頭部插槽自定義頭部 {{ slotProps.todo}} ...

liuhh 2019-08-22 18:16 評論0 收藏0