<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<div id="app">
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
<el-option label='加载更多' value="undefined" @click.native='handleClick($event)'></el-option>
</el-select>
</template>
</div>
// javascript
var Main = {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
},
methods: {
handleClick(event) {
this.value = undefined,
setTimeout(() => {
this.options.push(...[{value: '选项6',
label: '武汉鸭脖'},{value: '选项7',
label: '广式早点'},{value: '选项8',
label: '云南普洱'}])
}, 1000)
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
如上所示,实现了“加载更多”功能的代码,可以考虑在此基础上对element select进行封装。
网友评论