element ui 地區選擇單選與多選及資料回填

2021-10-09 18:03:33 字數 1856 閱讀 6823

在電商的後台管理系統,少不了的是位址地區,在選擇地區時,有單選與多選之分。

比如收貨位址的地區,是單選的。

如果是區域經理之類的,許可權可以包含多個地區的,則需要多選

下面就地區單選與地區多選進行詳細的介紹

需要實現上面的功能,所需要用到的是cascader級聯選擇器。

注釋如下:

v-model等同於value,意義在於選中項的繫結值

options:可選項資料來源,鍵名可通過props屬性配置,一般都是本地的檔案匯入的。例如地區資料來源

props 的寫法應該跟地區資料來源,相當於別名

value 對應的是code,label對應的是name,children對應的是childs.

optionprops:

地區選擇的值是地區的code值。

"onelevelform.regionids"

:options=

"regionsbuff"

:props=

"areaprops"

/>

與單選地區不同的是: multiple為true,則為多選,預設為false即單選。

areaprops:

資料回填的時候的格式是:

[[「140000」,「143200」,「143201」],[「140000」,「143200」,「143205」]

]後台返回的資料格式是:」143201,143205「,字串格式的。

此時的格式轉化步驟就是:

先將字串轉化為陣列。

遍歷陣列的每一項,根據此項的值,將省市的code碼拿出來。

將省市區的code放入到乙個陣列

此處的"北京北京市東城區"是根據code碼獲取到,具體根據code獲取地區名的方法如下:

if

(code)})

;}})

;}})

;return addr;

}

小程式 選擇地區(地區選擇器)

門店位址省 市 wxss address address text address view address view1 scroll scroll view list msg2 backnew js page 生命週期函式 監聽頁面載入 onload function options 獲取省的介面...

地區選擇控制項雜記

1.json資料讀取 private void initjsondata is.close 關閉流 jsonobject new jsonobject sb.tostring 為json賦值 catch exception e 2.初始化省市區資料 private void initdatas ca...

簡單選擇排序 簡單選擇排序詳解

n個記錄的檔案的直接選擇排序可經過n 1趟直接選擇排序得到有序結果 初始狀態 無序區為r 1.n 有序區為空。第1趟排序 在無序區r 1.n 中選出關鍵字最小的記錄r k 將它與無序區的第1個記錄r 1 交換,使r 1.1 和r 2.n 分別變為記錄個數增加1個的新有序區和記錄個數減少1個的新無序區...