讓element UI的select選擇器 :label 的值經過函式處理
讓element UI的select選擇器 :label 的值經過函式處理
1、問題產生
最近用element UI選擇器的時候產生了一個問題,它的label只能是陣列物件裡面的值,這樣很不方便,於是我試著用函式處理 :label 的內容,發現有效,於是記錄一下。
2、具體示例
1.開始的select程式碼
<template>
<el-select v-model="value" filterable placeholder="請選擇">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '選項1',
label: '黃金糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍鬚麵'
}, {
value: '選項5',
label: '北京烤鴨'
}],
value: ''
}
}
}
</script>
2.開始的select選擇器label選項
輸出了data裡面物件的label屬性
3.修改後的程式碼
<template>
<el-select v-model="value" filterable placeholder="請選擇">
<el-option
v-for="item in options"
:key="item.value"
:label="change(item)"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '選項1',
label: '黃金糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍鬚麵'
}, {
value: '選項5',
label: '北京烤鴨'
}],
value: ''
}
},
methods:{
//改變展示內容
change(item) {
if (item.label == undefined) {
return;
}
return (item.label.substr(0, 1));
},
}
}
</script>
4.修改程式碼後的select選擇器label選項
只是展示了一個字,與函式實現的功能一樣。
相關文章
- vue+element-ui獲取select的labelVueUI
- Element UI框架中巧用樹選擇器UI框架
- element ui中選擇元件el-select各種樣式和功能總結UI元件
- 修改元件內的引用的element UI元件樣式,使用深度作用選擇器 /deep/元件UI
- element ui 自定義的快捷選項的日期選擇器並格式化UI
- 使用element ui 日期選擇器獲取值後的格式問題UI
- main函式返回值的處理AI函式
- element-ui 時間選擇器設定時間選擇範圍UI
- CSS選擇器筆記,element element和element > element 的區別CSS筆記
- jQuery element選擇器jQuery
- jQuery取得select選擇的文字與值jQuery
- element-ui select input多選內容過多,+1顯示UI
- OnWndMsg函式的處理過程函式
- Element-ui 級聯選擇器元件功能擴充套件UI元件套件
- 伺服器處理器以及選擇伺服器
- jQuery----函式和選擇器jQuery函式
- 深度神經網路(DNN)損失函式和啟用函式的選擇神經網路DNN函式
- vue-element 選擇框 選擇值改變,顯示不變Vue
- C++ 函式過載,函式模板和函式模板過載,選擇哪一個?C++函式
- Element原始碼分析系列7-Select(下拉選擇框)原始碼
- go的選擇UIGoUI
- Vue中修改Element UI元件庫中的選擇器背景色不生效的解決方法VueUI元件
- 專案經理的選擇(轉載)
- Sanic 處理函式修飾器函式
- jQuery選擇器——基本過濾選擇器jQuery
- element-ui的日期選擇框底部清空按鈕點選不關閉日期選擇框的實現辦法UI
- 解決element-ui el-select資料過大方案UI
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- CSS 選擇器權值CSS
- css選擇器權值CSS
- 【Hello CSS】第五章-CSS的選擇器與函式CSS函式
- CSS樣式中的後代選擇器和子代選擇器CSS
- CSS樣式中的通用選擇器和偽類選擇器CSS
- 基於vue的Element-ui定義自己的select元件VueUI元件
- 【函式式 Swift】可選值函式Swift
- jQuery選擇器——內容過濾選擇器jQuery
- jQuery選擇器——子元素過濾選擇器jQuery
- jQuery選擇器——屬性過濾選擇器jQuery