vantUI 獲得piker選中值的自定義ID操作
更新時間：2020年11月04日 09:44:22 作者：HYeeee
這篇文章主要介紹了vantUI 獲得piker選中值的自定義ID操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題
官網(wǎng)中給的picker例子，每項只能是個字符串，但我需要它返回每個字符串對應的自定義ID，而不是index。
vantUI官網(wǎng)：picker
官網(wǎng)例子
<van-picker :columns="columns" @change="onChange" />
export default {
data() {
return {
columns: ['杭州', '寧波', '溫州', '嘉興', '湖州']
};
},
methods: {
onChange(picker, value, index) {
console.log('當前值'+value+ '當前索引'+index);
}
}
};
解決
現(xiàn)在我的需求是獲得選中的值的id，而不是要這個index，所以只能用對象數(shù)組，看到官網(wǎng)上的禁用例子的數(shù)組中：{ text: '杭州', disabled: true },說明確實每行的數(shù)據(jù)是個對象的，而顯示的部分就是text的值。
那就照著這個來唄！
export default {
data() {
return {
//改一下
columns: [
{"keyId":2,"text":"測試1"},
{"keyId":10,"text":"測試2"},
{"keyId":31,"text":"測試3"}
],
};
},
methods: {
onChange(picker, value, index) {
//此時返回的value就是個對象了
var keyId = value.keyId;
var text= value.text;
console.log('當前值'+keyId + '當前索引'+text);
}
}
};
補充知識：vantUI時間選擇器將選中值改為 yyyy-mm-dd 00:00:00 格式
vantUI時間選擇器默認選中值為：
更改之后
代碼如下
<van-popup v-model="startTimeshow" position="bottom" :overlay="true">
<van-datetime-picker
@cancel="Cancel"
@confirm="Confirm"
@change="Change"
v-model="currentDate"
type="date"
/>
</van-popup>
data() {
return {
currentDate: new Date()
};
}，
methods:{
Change（）{
console.log(this.currentDate);
var date = this.currentDate;
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
this.currentdate =
date.getFullYear() +
seperator1 +
month +
seperator1 +
strDate +
" " +
"00" +
seperator2 +
"00" +
seperator2 +
"00";
}
}
以上這篇vantUI 獲得piker選中值的自定義ID操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 右鍵菜單插件 簡單、可擴展、樣式自定義的右鍵菜單，本文給大家分享個例子，給大家及時的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細介紹了axios實現(xiàn)文件上傳并獲取進度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Console 對象提供了瀏覽器控制臺調(diào)試的接口。在不同宿主環(huán)境上它的工作方式可能不一樣，但通常都會提供一套共性的功能，本文主要總結(jié)了Console的一些高級用法，感興趣的小伙伴可以參考一下2023-04-04
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
最近一個項目需要進行大屏展示,所以登錄完就要處于一個全屏的狀態(tài),本文主要介紹了vue實現(xiàn)進入全屏和退出全屏的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
詳解vuex中mutations方法的使用與實現(xiàn)
這篇文章主要為大家詳細介紹了vuex中mutations方法的使用與實現(xiàn)的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11
本篇文章主要介紹了Vue2.0 實現(xiàn)單選互斥的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導致的,Vue本身并不限制跨域訪問,它只是一個前端框架,負責構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10
今天小編就為大家分享一篇Vue封裝的可編輯表格插件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關(guān)于element-ui中@selection-change執(zhí)行兩次的問題
這篇文章主要介紹了關(guān)于element-ui中@selection-change執(zhí)行兩次的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08