層級選擇器之關(guān)鍵詞搜索功能
上一章我們已經(jīng)全部完成了層級選擇器的實現(xiàn)。除此之外我們還想增加一個關(guān)鍵詞搜索功能。在此之前我們需要先完成二級選擇器的顯示與隱藏。通過v-show來控制二級選擇器的顯示與隱藏。當(dāng)點擊按鈕時,在方法里改變item.isShow的值即可。若后臺數(shù)據(jù)中沒有提供isShow這樣的字段,則需要在請求接口的時候本地初始化。接下來需要實現(xiàn)關(guān)鍵詞搜索功能。利用filter函數(shù),當(dāng)包含關(guān)鍵詞的時候就返回這條數(shù)據(jù)。如圖...
2023-08-12
vantUI通過按鈕全選層疊選擇器
上一篇我們已經(jīng)利用van-checkbox成功實現(xiàn)二級選擇器控制一級的選中狀態(tài),點擊此鏈接>>查看。最后需要實現(xiàn)通過最外層全選按鈕全選所有選擇器的功能。給全選按鈕添加click或change事件(都可)。我們需要通過判斷全選按鈕的選中狀態(tài)來控制層疊選擇器是否全選,在checkAllLeader函數(shù)中執(zhí)行以下代碼:當(dāng)全選時,將一級選擇器選中狀態(tài)設(shè)置為true,并執(zhí)行上篇提到的checkAllMemb...
vantUI通過二級選擇器控制一級的選中狀態(tài)
上一篇我們已經(jīng)利用van-checkbox成功實現(xiàn)一級選擇器控制二級全選的功能,點擊此鏈接>>查看。接下來需要實現(xiàn)當(dāng)取消任意一個二級選擇器的選中狀態(tài)(即取消全選狀態(tài)時),一級選擇器也同步取消。首先給二級選擇器添加click事件,同樣,不要給復(fù)選框組添加change事件,避免一級選擇器選中狀態(tài)變化時change事件會一直觸發(fā)。復(fù)選框組通過 v-model 數(shù)組綁定復(fù)選框的勾選狀態(tài),通過name控制數(shù)...
elementui 基于el-tree 實現(xiàn)同步狀態(tài)修改
上一篇我們實現(xiàn)了el-tree中子節(jié)點的選擇與添加,此外,我們還需要實現(xiàn)點擊右側(cè)刪除按鈕的時候,左側(cè)選擇器的選中狀態(tài)同步改變,checkList數(shù)組和checkIdList數(shù)組對應(yīng)的數(shù)據(jù)能夠同步刪除。由于左側(cè)與右側(cè)綁定的是同一數(shù)組,只需要刪除時傳入item,將checkList中的item刪除,左側(cè)選擇器的選中狀態(tài)就可同步改變。如圖:此時還需要刪除checkIdList數(shù)組中對應(yīng)的id。可先循環(huán)后...
Vue中的表單內(nèi)容監(jiān)聽,當(dāng)表單內(nèi)容發(fā)生變化時,觸發(fā)一些事件
首先解釋一下什么是表單內(nèi)容監(jiān)聽,我這里是將表單數(shù)據(jù)全部儲存到list變量中,當(dāng)用戶填寫了內(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ù)則是當(dāng)監(jiān)聽的...
elementui 基于el-tree樹形選擇向后臺傳輸數(shù)據(jù)
之前已經(jīng)基于el-tree實現(xiàn)了人員選擇功能。點擊此鏈接>>查看。但由于后續(xù)操作,我們還需要把選中數(shù)據(jù)的id值傳給后臺,所以現(xiàn)在還應(yīng)想辦法獲取每條數(shù)據(jù)的id值。給el-checkbox添加change事件,當(dāng)監(jiān)聽到選中值時執(zhí)行如下方法,有則刪除,沒有則添加:現(xiàn)在checkIdList數(shù)組中存的是選中數(shù)據(jù)的id值,由于后端接收的參數(shù)是字符串列表,id由,分割所以直接將數(shù)組join一下就得到了例如:1...
