用 vue2 + elementUI 帮我实现一个列表 表头有 姓名年龄手机号爱好 包含分页和查询区域 并带有交互请求表头能够根据年龄排序

<template>
  <div>
    <el-card>
      <div slot="header">
        <h3>用户列表</h3>
      </div>
      <el-form :inline="true" :model="form" class="filter-form">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model.number="form.age"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model.number="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="爱好">
          <el-input v-model="form.hobby"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        :default-sort="{ prop: 'age', order: 'ascending' }"
        @sort-change="handleSort"
        style="width: 100%"
      >
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="年龄" prop="age" sortable></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="爱好" prop="hobby"></el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        @current-change="handlePageChange"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { getUserList } from '@/api/user'

export default {
  data() {
    return {
      form: {
        name: '',
        age: '',
        phone: '',
        hobby: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const { data } = await getUserList({
        name: this.form.name,
        age: this.form.age,
        phone: this.form.phone,
        hobby: this.form.hobby,
        page: this.currentPage,
        pageSize: this.pageSize
      })
      this.tableData = data.list
      this.total = data.total
    },
    handleFilter() {
      this.currentPage = 1
      this.getTableData()
    },
    handleReset() {
      this.form = {
        name: '',
        age: '',
        phone: '',
        hobby: ''
      }
      this.currentPage = 1
      this.getTableData()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.getTableData()
    },
    handleSort({ prop, order }) {
      this.tableData = this.tableData.sort((a, b) => {
        const sortValue = order === 'ascending' ? 1 : -1
        return sortValue * (a[prop] - b[prop])
      })
    }
  }
}
</script>
<style scoped>
.filter-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>