el-select回显多选数据(下拉里有一级数据,也有二级数据)
在使用el-select
组件实现多选回显时,你需要确保你的数据源中包含了所有选项,并且每个选项都有一个唯一标识,通常是id。当你需要回显已选择的值时,你可以将已选择的值的数组绑定到el-select
的v-model
。
以下是一个简单的例子:
<template>
<el-select v-model="selectedValues" multiple 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 {
selectedValues: ['value1', 'value3'], // 已选择的值数组
options: [
{ label: '选项1', value: 'value1' },
{ label: '选项2', value: 'value2' },
{ label: '选项3', value: 'value3' },
// ... 更多选项
]
};
}
};
</script>
在这个例子中,selectedValues
是一个包含已选择值的数组,options
是下拉菜单的所有选项。el-select
通过v-model
绑定selectedValues
,实现多选功能。当页面加载时,el-select
会自动根据selectedValues
数组中的值来选中对应的选项。
评论已关闭