如何通过vue和Element-plus实现数据的分页和加载更多

# main.jsimport { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'createApp(App).use(ElementPlus).mount('#app')

<!-- DataList.vue --><template>  <div>    <ul>      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>    </ul>    <el-pagination      :current-page="currentPage"      :page-sizes="[10, 20, 30, 40]"      :page-size="pageSize"      :total="total"      layout="sizes, prev, pager, next, jumper"      @current-change="handleCurrentChange"    ></el-pagination>    <el-button      v-show="showLoadMore"      @click="handleLoadMore"      type="text"    >加载更多</el-button>  </div></template><script>export default {  data() {    return {      currentPage: 1, // 当前页码      total: 0, // 总记录数      pageSize: 10, // 每页条数      showLoadMore: false, // 是否显示加载更多按钮      dataList: [], // 数据列表    }  },  computed: {    currentPageData() { // 当前页的数据      return this.dataList.slice(        (this.currentPage - 1) * this.pageSize,        this.currentPage * this.pageSize      )    },  },  mounted() {    this.getDataList() // 初始化数据  },  methods: {    async getDataList() {      // 这里模拟获取数据，实际开发中可替换为接口请求      // 示例：通过axios请求数据      const response = await axios.get('/api/dataList')            this.dataList = response.data      this.total = this.dataList.length            this.showLoadMore = this.currentPage * this.pageSize < this.total // 是否显示加载更多按钮    },    handleCurrentChange(currentPage) { // 页码改变时触发      this.currentPage = currentPage    },    handleLoadMore() { // 加载更多      this.currentPage++      this.showLoadMore = this.currentPage * this.pageSize < this.total // 是否显示加载更多按钮    },  },}</script><style scoped></style>