el-select 選擇器相關
有兩個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
},
},
相關文章
- 【OPTIMIZATION】Oracle影響優化器選擇的相關技術Oracle優化
- 相鄰兄弟選擇器、後代選擇器和子選擇器三者有什麼區別?
- CSS (E+F)相鄰選擇器CSS
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- CSS3 相鄰兄弟選擇器 hoverCSSS3
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- 關於jQuery中的選擇器jQuery
- CSS 加號 (E+F) 相鄰選擇器CSS
- CSS介紹、選擇器、屬性相關CSS
- CSS3新增選擇器(屬性選擇器、結構偽類選擇器、偽元素選擇器)CSSS3
- jQuery選擇器之層次選擇器jQuery
- 選擇器
- element ui中選擇元件el-select各種樣式和功能總結UI元件
- elementui el-select多選進行初始化後,重新選擇選不上問題完美解決。UI
- CSS選擇器CSS
- jQuery選擇器jQuery
- jQuery 選擇器jQuery
- 選擇伺服器需要關注哪些問題伺服器
- 舉例說明你對相鄰兄弟選擇器的理解
- jQuery 選擇器彙總-思維導圖-選擇器jQuery
- 淺談邏輯選擇器 -- 父選擇器它來了!
- PostgreSQL copy相關選項SQL
- CSS 元素選擇器CSS
- CSS :valid 選擇器CSS
- CSS :required 選擇器CSSUI
- CSS :optional 選擇器CSS
- CSS id選擇器CSS
- iOS選擇器元件iOS元件
- Java NIO:選擇器Java
- jQuery 選擇器效率jQuery
- jQuery選擇器(下)jQuery
- css選擇器概述CSS
- Jquery的選擇器jQuery
- CSS選擇器(一)CSS
- HTML常用選擇器HTML
- CSS常用選擇器CSS
- Django筆記十三之select_for_update等選擇和更新等相關操作Django筆記
- 關於css選擇器和樣式表的應用CSS