elementui 基于el-tree 實現(xiàn)同步狀態(tài)修改
上一篇我們實現(xiàn)了el-tree中子節(jié)點的選擇與添加，此外，我們還需要實現(xiàn)點擊右側刪除按鈕的時候，左側選擇器的選中狀態(tài)同步改變，checkList數(shù)組和checkIdList數(shù)組對應的數(shù)據(jù)能夠同步刪除。由于左側與右側綁定的是同一數(shù)組，只需要刪除時傳入item，將checkList中的item刪除，左側選擇器的選中狀態(tài)就可同步改變。如圖：此時還需要刪除checkIdList數(shù)組中對應的id。可先循環(huán)后...
Vue中的表單內(nèi)容監(jiān)聽，當表單內(nèi)容發(fā)生變化時，觸發(fā)一些事件
首先解釋一下什么是表單內(nèi)容監(jiān)聽，我這里是將表單數(shù)據(jù)全部儲存到list變量中，當用戶填寫了內(nèi)容之后，將用戶填寫的內(nèi)容更新到list變量中，說是監(jiān)聽表單內(nèi)容實際上是監(jiān)聽變量中的數(shù)據(jù)內(nèi)容。監(jiān)聽數(shù)據(jù)變化可以用watch方法，它是Vue組件中的一個功能，可以監(jiān)聽數(shù)據(jù)變化，并在數(shù)據(jù)變化時執(zhí)行一些操作。watch方法使用起來比較簡單，只需要傳兩個參數(shù)就可以，第一個參數(shù)是需要監(jiān)聽的變量數(shù)據(jù)，第二個參數(shù)則是當監(jiān)聽的...
elementui 基于el-tree樹形選擇向后臺傳輸數(shù)據(jù)
之前已經(jīng)基于el-tree實現(xiàn)了人員選擇功能。點擊此鏈接>>查看。但由于后續(xù)操作，我們還需要把選中數(shù)據(jù)的id值傳給后臺，所以現(xiàn)在還應想辦法獲取每條數(shù)據(jù)的id值。給el-checkbox添加change事件，當監(jiān)聽到選中值時執(zhí)行如下方法，有則刪除，沒有則添加：現(xiàn)在checkIdList數(shù)組中存的是選中數(shù)據(jù)的id值,由于后端接收的參數(shù)是字符串列表，id由，分割所以直接將數(shù)組join一下就得到了例如：1...
elementui 基于el-tree樹形選擇器實現(xiàn)人員選擇功能
之前已經(jīng)基于el-tree實現(xiàn)了一個只有最后一級子節(jié)點可選擇的層級選擇器。點擊此鏈接>>查看?，F(xiàn)在希望實現(xiàn)選中之后，右邊能同步展示已選擇的內(nèi)容。如圖：后臺數(shù)據(jù)如圖所示，將獲取到的數(shù)據(jù)綁定到el-tree上，現(xiàn)在checkList數(shù)組中存的是每一條數(shù)據(jù)的label值。想實現(xiàn)右邊同步展示已選擇的內(nèi)容，只需要為其綁定checkList數(shù)組即可，如圖所示：Ps：右邊使用的是vuedragger拖拽，有關拖...
利用vantUI中的van-checkbox實現(xiàn)層級選擇器（一）
翻了一下vantUI官網(wǎng)，發(fā)現(xiàn)沒有可以直接使用的樹形控件或層級選擇器的組件，所以嘗試用checkbox實現(xiàn)。我們想實現(xiàn)的是如圖所示的功能，當選中一級選擇器后，其所屬的二級選擇器能夠被全選；當取消二級選擇器的全選狀態(tài)時，一級選擇器也同時取消選中狀態(tài)；最外層還有一個全選按鈕控制所有選擇器的全選。DOM結構如圖所示：首先實現(xiàn)一級選擇器控制二級全選的功能。van-checkbox有提供toggleAll方...
利用vantUI中的van-checkbox實現(xiàn)層級選擇器（二）
上一篇我們已經(jīng)實現(xiàn)了只有一組復選框組的時候通過一級選擇器控制二級全選，但是很多情況下都不止一組復選框組，比如需要循環(huán)渲染后臺數(shù)據(jù)時，由于外層標簽有vfor循環(huán)，會導致出現(xiàn)很多個ref注冊的組件，此時的toggleAll方法便會失效或者報錯。拋棄自帶的全選方法，我們這里使用map函數(shù)處理數(shù)據(jù)。首先給一級選擇器添加click事件。注意要使用click事件而不是change事件，否則后面實現(xiàn)取消全選功能...
