表格

<el-table :data="tableData" border >
  <el-table-column prop="name" label="姓名" width="100px"/>
  <el-table-column prop="email" label="邮箱"  />
  <el-table-column prop="phone" label="手机号"  />
  <el-table-column prop="role" label="角色" />
</el-table>

分页

<el-pagination
  v-model:current-page="currentPage"
  v-model:page-size="pageSize"
  :page-sizes="[10, 20, 30, 40]"
  :size="size"
  :disabled="disabled"
  :background="background"
  layout=" prev, pager, next,jumper, ->,total, sizes"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>

<script setup lang="ts">
import { ref,reactive } from 'vue'

const currentPage = ref(1) //当前页码
const pageSize = ref(10) //每页显示条数
const size = ref('') //分页器尺寸大小
const disabled = ref(false) //是否禁用分页器
const background = ref(true) //是否显示背景颜色
const total = ref(400) //总条数

const tableData = reactive([
  {
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '13800000000',
    role: '管理员'
  },
  {
    name: '李四',
    email: 'lisi@example.com',
    phone: '13800000001',
    role: '普通用户'
  }
])
</script>

Dialog