動態繫結elementUI級聯選擇器的值和顯示內容

2021-10-10 14:47:25 字數 658 閱讀 2501

前端中大部分的資料都是由訪問後台介面獲取到。所以我們需要將獲取到的資料再繫結到對應的元件中。其中介面對應的字段和元件中要繫結的字段不一樣完全一致,所以我們要設定相應的屬性,實現聯動,一一對應。

後台返回的資料格式如下

[,,

,]},

,]}]

}]

檢視官方文件可知,顯示文字對應的是props 中的label屬性。因此在data中新增屬性設定label ,並在template中對應的級聯選擇器繫結屬性。

data()

, cascaderval:

,}}

v-model=

"cascaderval"

:options=

"options"

collapse-tags

clearable

:props=

'props'

>

"">

}<

/span>

"!node.isleaf"

>(}

)<

/span>

<

/template>

<

/el-cascader>

element ui動態換膚

通過在elementui的框架基礎上使用colorpicker顏色選擇器進行動態換膚,多餘的話就不說了下述 能夠直接使用。動態換膚效果圖 展示詳情 el button dark content placement bottom v model theme class theme picker siz...

elementui 動態表頭

最近,在用elementui做乙個動態表頭的功能,把自己開發的流程大概分享一下。首先,我們得了解這個option的作用 這個 option屬性就是繫結我們列表 的模板。通過引入我們寫好的js檔案來構成乙個 這個js檔案我也貼一部分 出來介紹一下 可以看出來,這個column就是我們的列陣列。那麼,做...

Element UI級聯位址省市區外掛程式

npm install element china area data simport from element china area data import from element china area data provinceandcitydata 是省市二級聯動資料 不帶 全部 選項 re...