一、思路
1.直接使用el-scrollbar包裹内容
2.listNum ： 数组的长度，初始值默认为3
3.点击事件：用于改变数组的长度(每次点击长度加3)
4.computed：用于监听数组firstList的变化
二、实现代码
<template>
<div class="list-container">
<el-scrollbar
wrap-style="border:1px solid red;color: blue;height:200px;"
>
<div v-for="(item,index) in firstList" :key="index">
<p>{{item.value}}</p>
<p>{{item.label}}</p>
</div>
</el-scrollbar>
<el-button class="btn" @click="more">加载更多</el-button>
</div>
</template>
<script>
export default {
name: "selectUi",
data() {
return {
listNum:3,
options: [
{
value: "1",
label: "北京"
},
{
value: "2",
label: "上海"
},
{
value: "3",
label: "广州"
},
{
value: "4",
label: "珠海"
},
{
value: "5",
label: "杭州"
},
{
value: "6",
label: "哈尔滨"
}
],
};
},
computed:{
firstList(){
return this.options.slice(0,this.listNum)
}
},
methods:{
more(){
this.listNum += 3;
}
}
};
</script>
<style scoped>
.list-container {
position: relative;
width: 200px;
height: 300px;
border: 1px solid #cccccc;
}
.btn{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,0)
}
</style>
三、实现效果
