如何在元素UI中的datatable中使用分页？

import { DataTable } from 'element-ui';

export default {
  components: {
    DataTable
  },
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0 // 总条数
    };
  },
  methods: {
    fetchData() {
      // 根据当前页码和每页显示条数，从后端获取数据
      // 更新tableData和total
    },
    handleCurrentChange(val) {
      // 当前页码改变时的回调函数
      this.currentPage = val;
      this.fetchData();
    }
  },
  mounted() {
    this.fetchData(); // 初始化时获取数据
  }
};

<template>
  <div>
    <el-data-table
      :data="tableData"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    >
      <!-- 表格列配置 -->
    </el-data-table>
  </div>
</template>