<template>
  <IntegratedTable
    :columns="columns"
    :data="tableData"
    :pagination="pagination"
    @page-change="handlePageChange"
    @size-change="handleSizeChange"
  >
    <template #header>
      <div class="table-header">
        <div class="table-title">自定义标题</div>
        <div class="table-actions">
          <el-button type="primary" size="small">新增</el-button>
        </div>
      </div>
    </template>
  </IntegratedTable>
</template>
<script setup>
import IntegratedTable from './index.vue'

const columns = [
  {
    prop: 'name',
    label: '姓名',
    width: '150px'
  },
  {
    prop: 'age',
    label: '年龄',
    width: '100px'
  },
  {
    prop: 'address',
    label: '地址',
    width: '200px'
  }
]
const tableData = [
  {
    name: '张三',
    age: 25,
    address: '北京市海淀区'
  },
  {
    name: '李四',
    age: 30,
    address: '上海市浦东新区'
  },
  {
    name: '王五',
    age: 28,
    address: '广州市天河区'
  }
]
const pagination = {
  total: 100,
  currentPage: 1,
  pageSize: 10
}

const handlePageChange = (page) => {
  pagination.currentPage = page
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
}
</script>
