elementui 基于el-tree樹形選擇器實現人員選擇功能
之前已經基于el-tree實現了一個只有最后一級子節點可選擇的層級選擇器。點擊此鏈接>>查看。現在希望實現選中之后，右邊能同步展示已選擇的內容。如圖：后臺數據如圖所示，將獲取到的數據綁定到el-tree上，現在checkList數組中存的是每一條數據的label值。想實現右邊同步展示已選擇的內容，只需要為其綁定checkList數組即可，如圖所示：Ps：右邊使用的是vuedragger拖拽，有關拖...
利用vantUI中的van-checkbox實現層級選擇器（一）
翻了一下vantUI官網，發現沒有可以直接使用的樹形控件或層級選擇器的組件，所以嘗試用checkbox實現。我們想實現的是如圖所示的功能，當選中一級選擇器后，其所屬的二級選擇器能夠被全選；當取消二級選擇器的全選狀態時，一級選擇器也同時取消選中狀態；最外層還有一個全選按鈕控制所有選擇器的全選。DOM結構如圖所示：首先實現一級選擇器控制二級全選的功能。van-checkbox有提供toggleAll方...
利用vantUI中的van-checkbox實現層級選擇器（二）
上一篇我們已經實現了只有一組復選框組的時候通過一級選擇器控制二級全選，但是很多情況下都不止一組復選框組，比如需要循環渲染后臺數據時，由于外層標簽有vfor循環，會導致出現很多個ref注冊的組件，此時的toggleAll方法便會失效或者報錯。拋棄自帶的全選方法，我們這里使用map函數處理數據。首先給一級選擇器添加click事件。注意要使用click事件而不是change事件，否則后面實現取消全選功能...
vue路由|動態路由|分權跳轉
將cookie里是否存有token作為驗證是否登錄的條件，若token不存在或已過期則跳轉登錄界面，還需要判斷是否為移動端跳轉不同的登錄界面，參考上一篇。若不存在token且用戶登錄信息不存在，則重新獲取登錄信息。若已登錄且登錄信息存在，則動態添加路由。Router為router.js里的一堆路由，routes為后臺獲取的web_router里的路由。首先只輸入根目錄/域名時，他會自動跳到/ind...
js中Object.keys()和Object.values()方法的詳解與使用
Object.keys()方法返回給定對象[key，value]鍵值對中的key值，并以數組的方式遍歷出來。返回的結果如圖所示。Object.values()方法與之相反，返回的是給定對象[key，value]鍵值對中的value值，如圖：在實際開發中，很多時候我們需要把后臺提供的對象屬性轉換為數組以供前端使用，上面兩種方法便為我們提供了方便。例如在使用vantUI中的van-picker選擇器的...
2023-07-21
VantUI中van-picker選擇器綁定數組對象的使用方法
VantUI官網中給的示例是一個包含字符串的純數組，如圖所示：但是大多時候，我們需要綁定的都是一個對象數組，如果直接使用的話，渲染的效果會顯示為[Object]。這時可以利用van-picker自帶的 value-key 屬性，value-key屬性指選項對象中，選項文字對應的鍵名。以下面的數據為例：我們希望選擇器展示的是對象中的username屬性，則在van-picker中添加如下代碼：這時可...
