一、思路
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>

三、实现效果