html form select回显,vue v-for多个el-select编辑时回显问题

可能是你重新赋值的关系，给你一个demo，你对照着看下。

multiple

placeholder="请选择"

v-model="selectHierarchyCol[index]"

@change="handleSelectChange"

>

v-for="item in options"

:key="item.id"

:label="item.label"

:value="item.id">

const hierarchyColList = [{id:'111',label:'哈哈哈'},{id:'222',label:'是是是'},{id:'333',label:'我我我'}]

const selectedData = [{col:'111,222'},{col:'222'},{col:'222,333'}]

export default {

data() {

return {

options: hierarchyColList,

selectHierarchyCol: [[]], // 这样的话默认会有一个select

};

},

mounted(){

// 延迟赋值

setTimeout(()=>{

this.selectHierarchyCol = selectedData.map(item => item.col.split(',')) // 处理已经绑定过的值，通过逗号转换成数组

},2000)

},

methods: {

// 添加删除

oqsHierarchy(index){

if(index){

this.selectHierarchyCol.splice(index,1)

}else{

this.selectHierarchyCol.push([])

}

},

// 输出已选的值

handleSelectChange(selectedVal){

// 这里会输出已选择的options数组，值是绑定的value

console.log('当前选择器修改后的值：',selectedVal)

}

}

};

主要是在赋值这块，Ele 的 选择器 需要用数组的形式来绑定已选择的选项