el-select是Element-UI提供的下拉選擇組件,我們可以通過設置openeds屬性來控制下拉菜單的展開狀態。
openeds是一個數組,用來存儲每個下拉菜單的展開狀態。我們可以通過v-model指令來綁定openeds數組,實現雙向綁定。下面是一個示例:
<template>
<el-select v-model="selectedItem" multiple :openeds.sync="openeds">
<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 {
options: [
{ label: '選項1', value: 1 },
{ label: '選項2', value: 2 },
{ label: '選項3', value: 3 }
],
selectedItem: [],
openeds: [false, false, false]
};
}
};
</script>
在上面的示例中,我們綁定了一個數組openeds到el-select的openeds.sync屬性上。這個數組初始值為[false, false, false],表示三個下拉菜單都是關閉狀態。當我們展開或關閉下拉菜單時,openeds數組對應的值會發生改變。例如,下拉菜單1展開時,openeds數組變成[true, false, false]。
需要注意的是,openeds數組的長度必須等于el-select中下拉菜單的數量,否則會出現錯誤。同時,我們可以通過在el-select中設置collapse-tags屬性來實現多選下拉菜單的折疊和展開。
上一篇鏈接到css文件
下一篇鏈接外部css rel