elementui_select展开触发其他事件
最近同事做到一个需求，页面有多个el-select每个el-select点开后需要向下拉框里添加不同的内容
想写一个统一的方法用于处理这种情况，不用每个下拉框的@visible-change事件单独写一个函数
结果发现@visible-change默认接受一个参数无法修改
相当于添加自定义参数问题
1
2
3
4
5
6
| //这样可以获取下拉框状态 arguments为[true]
@visible-change="handerClick"
//这样无法获取下拉框状态 arguments为[a,b,c]
@visible-change="handerClick('a','b','c')"
//添加一个参数即可 arguments为[true,a,b,c]
@visible-change="handerClick($event,'a','b','c')"
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <template lang="html">
<div>
<el-select v-model="value" placeholder="请选择"
@visible-change="handerClick($event,'zx','ls')"
id="s1"
ref="ref0">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value1" placeholder="请选择"
id="s2"
@visible-change="handerClick"
ref="ref1">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value1: '',
value: ''
}
},
methods: {
handerClick () {
console.log('arguments', arguments)
}
}
}
</script>
|
