用vue3实现一个复杂表格的 useList hooks

在 Vue3 中，为了方便函数组件（Functional Components）编写，提供了 Hooks API。Hooks 可以让组件逻辑更加清晰、可复用，而不需要使用 Vue2.x 中的 Options API。本文将介绍如何使用 Vue3 的 Hooks API 实现一个复杂表格的 useList hooks。

首先，定义一个 useList hooks，主要用于获取列表数据：

import { reactive, toRefs } from 'vue'

export default function useList() {
  const state = reactive({
    list: [],
    total: 0,
    loading: false,
    page: 1,
    limit: 10,
  })

  const getList = async () => {
    state.loading = true
    // 请求列表数据，假设请求函数名为 getTableList
    const { list, total } = await getTableList(state.page, state.limit)
    state.list = list
    state.total = total
    state.loading = false
  }

  return {
    ...toRefs(state),
    getList,
  }
}

接下来，我们定义一个复杂表格的组件 TableList：

<template>
  <el-table
    :data="list"
    :loading="loading"
    @sort-change="handleSort"
  >
    <!-- 省略列定义 -->
  </el-table>
</template>

<script>
import { computed } from 'vue'
import useList from './useList'

export default {
  setup() {
    // 获取列表数据
    const { list, total, loading, page, limit, getList } = useList()

    // 排序方法
    const handleSort = (sortCondition) => {
      // 根据排序条件重新请求数据
      getList({ page, limit, ...sortCondition })
    }

    // 分页方法
    const handlePageChange = (currentPage) => {
      // 根据页码重新请求数据
      getList({ page: currentPage, limit })
    }

    // 定义计算属性，根据总记录数和每页显示数计算总页数
    const pageCount = computed(() => {
      return Math.ceil(total / limit)
    })

    return {
      list,
      total,
      loading,
      limit,
      page,
      pageCount,
      handleSort,
      handlePageChange,
    }
  },
}
</script>

在上述代码中，我们使用了 useList hooks 获取列表数据，同时定义了 handleSort 和 handlePageChange 方法用于处理排序和分页逻辑。我们还定义了一个计算属性 pageCount 用于计算总页数。

现在，我们已经成功使用 Vue3 的 Hooks API 实现了复杂表格的 useList hooks。在实际开发中，我们可以根据自身需求对其进行扩展以达到更好的效果。