让以下分页功能可以正常使用script lang=ts setupimport computed ref from vueinterface User date string name string address stringconst search = refconst filterTableData = computed = tableDatafilter

要让分页功能正常使用，你需要添加一些代码来处理分页逻辑。首先，你需要引入ref和reactive函数，并且创建一个currentPage的响应式变量来保存当前页码。然后，你可以使用computed函数来计算过滤后的表格数据和总页数。最后，在模板中使用el-pagination组件来展示分页器，并通过v-model绑定currentPage变量。

以下是修改后的代码示例：

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

interface User {
    date: string
    name: string
    address: string
}

const search = ref('')
const currentPage = ref(1)
const pageSize = 10

const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)

const paginatedTableData = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize
    const endIndex = startIndex + pageSize
    return filterTableData.value.slice(startIndex, endIndex)
})

const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}

const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}

const tableData: User[] = [
    // your data
]

const totalPage = computed(() => Math.ceil(filterTableData.value.length / pageSize))

const handlePageChange = (page: number) => {
    currentPage.value = page
}

</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-container>
                <el-main class="main">
                    <div>
                        <el-table :data="paginatedTableData" style="width: 100%">
                            <el-table-column label="ID" prop="date" />
                            <el-table-column label="姓名" prop="name" />
                            <el-table-column align="right">
                                <template #header>
                                    <el-input v-model="search" size="small" placeholder="搜索..." />
                                </template>
                                <template #default="scope">
                                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                                    <el-popconfirm title="确认删除?">
                                        <template #reference>
                                            <el-button size="small" type="danger"
                                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination background layout="prev, pager, next" :total="totalPage" v-model:current-page="currentPage" @current-change="handlePageChange" />
                    </div>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped></style>

这样，你就可以根据当前页码来展示对应的数据，并且可以通过分页器进行翻页操作