有两个Select 选择器,前面一个下拉框选中的数据,是后面Select 选择器的总数据。
<el-select v-model="value1" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<!-- 新的下拉地址 -->
<el-select
v-if="newOptions.length > 0"
v-model="value2"
multiple
placeholder="新的select"
>
<el-option
v-for="item in newOptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
data() {
return {
options: [
{
id: 11,
name: '我的11',
},
{
id: 12,
name: '我的12',
},
{
id: 13,
name: '我的13',
},
{
id: 14,
name: '我的14',
},
{
id: 16,
name: '我的16',
},
],
value1: [], // 下拉1
value2: [], // 下拉2
newOptions: [], // 新下拉数组
}
}
watch: {
value1(e) {
this.value2 = [] // 初始化新的下拉
let newOptions = []
for (let i = 0; i < this.options.length; i++) {
if (e.indexOf(this.options[i].id) != -1) {
newOptions.push(this.options[i])
}
}
this.newOptions = newOptions
},
},