el-select multiple 資料回顯問題
阿新 • • 發佈:2021-10-28
v-model接收的資料應該是陣列,而已數組裡的引數必須是number:[0,1,2] 的形式,才能正確顯示。資料庫裡存的"1,2,9",後端返回回來的是字串所以對資料進行重構,先醬字串轉換為陣列,再去遍歷,將item的值轉換為number,最後重新push。
擇善人而交,擇善書而讀,擇善言而聽,擇善行而從。<template> <div> <el-select v-model="value1" multiple placeholder="請選擇"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <br /> {{value1}} <br /> <el-button @click="btnClick">點選</el-button> </div> </template> <script> export default { name: "Vue6", data(){ return{ // options: [{value: '1',label: 'label1' }, {value: '2',label: 'label2'}, // {value: '3',label: 'label3' }, { value: '4', label: 'label4'}, // {value: '5',label: 'label5' }], options: [{value: 1,label: 'label1' }, {value: 2,label: 'label2'}, {value: 3,label: 'label3' }, { value: 4, label: 'label4'}], value1: [], } }, methods:{ btnClick(){ let l1= "1,4"; // this.value1 = l1.split(',') this.value1 = this.getLstInteger(l1); }, getLstInteger(str){ let lStrTemp = []; str.split(',').map(u=>{lStrTemp.push(parseInt(u))}); return lStrTemp; } } } </script>