Vue Hook 封装通用型表格

一、创建通用型表格的需求

实现一个通用型表格组件,具备以下功能:

  1. 动态列配置。
  2. 分页功能。
  3. 排序功能。
  4. 可扩展的行操作功能。

二、设计通用型表格组件

首先,需要设计一个基础的表格组件,它接受列配置、数据和分页信息等参数。

1. 创建 useTable Hook

src/hooks 目录下创建 useTable.js 文件:

复制代码
import { ref, reactive, onMounted, toRefs } from 'vue';

export function useTable(fetchData) {
  const state = reactive({
    loading: false,
    data: [],
    pagination: {
      currentPage: 1,
      pageSize: 10,
      total: 0,
    },
    sort: {
      field: '',
      order: '',
    },
  });

  const loadData = async () => {
    state.loading = true;
    const { currentPage, pageSize } = state.pagination;
    const { field, order } = state.sort;
    const result = await fetchData(currentPage, pageSize, field, order);
    state.data = result.data;
    state.pagination.total = result.total;
    state.loading = false;
  };

  const changePage = (page) => {
    state.pagination.currentPage = page;
    loadData();
  };

  const changePageSize = (size) => {
    state.pagination.pageSize = size;
    loadData();
  };

  const changeSort = (field, order) => {
    state.sort.field = field;
    state.sort.order = order;
    loadData();
  };

  onMounted(() => {
    loadData();
  });

  return {
    ...toRefs(state),
    loadData,
    changePage,
    changePageSize,
    changeSort,
  };
}

2. 创建 TableComponent.vue

src/components 目录下创建 TableComponent.vue 文件:

复制代码
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="col in columns" :key="col.key" @click="changeSort(col.key)">
            {{ col.title }}
            <span v-if="sort.field === col.key">{{ sort.order === 'asc' ? '↑' : '↓' }}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in data" :key="row.id">
          <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="changePage(pagination.currentPage - 1)" :disabled="pagination.currentPage === 1">Previous</button>
      <span>{{ pagination.currentPage }} / {{ Math.ceil(pagination.total / pagination.pageSize) }}</span>
      <button @click="changePage(pagination.currentPage + 1)" :disabled="pagination.currentPage === Math.ceil(pagination.total / pagination.pageSize)">Next</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useTable } from '@/hooks/useTable';

export default {
  props: {
    fetchData: {
      type: Function,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const { data, loading, pagination, sort, loadData, changePage, changePageSize, changeSort } = useTable(props.fetchData);

    return {
      data,
      loading,
      pagination,
      sort,
      loadData,
      changePage,
      changePageSize,
      changeSort,
    };
  },
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>

三、使用通用型表格组件

在实际项目中,可以这样使用这个通用型表格组件:

1. 创建 ExampleTable.vue 组件

src/views 目录下创建 ExampleTable.vue 文件:

复制代码
<template>
  <div>
    <TableComponent :fetchData="fetchData" :columns="columns" />
  </div>
</template>

<script>
import TableComponent from '@/components/TableComponent.vue';

export default {
  components: {
    TableComponent,
  },
  setup() {
    const columns = [
      { key: 'name', title: 'Name' },
      { key: 'age', title: 'Age' },
      { key: 'email', title: 'Email' },
    ];

    const fetchData = async (page, pageSize, sortField, sortOrder) => {
      // 模拟数据获取
      const total = 100;
      const data = Array.from({ length: pageSize }, (v, i) => ({
        id: (page - 1) * pageSize + i + 1,
        name: `Name ${(page - 1) * pageSize + i + 1}`,
        age: 20 + ((page - 1) * pageSize + i + 1) % 30,
        email: `user${(page - 1) * pageSize + i + 1}@example.com`,
      }));
      return { data, total };
    };

    return {
      columns,
      fetchData,
    };
  },
};
</script>

四、解释代码

  1. 定义 useTable Hook

    • 使用 Vue 的 refreactive 定义表格状态。
    • 定义 loadDatachangePagechangePageSizechangeSort 函数来处理数据加载和分页、排序变化。
    • 使用 onMounted 生命周期钩子在组件挂载时加载数据。
  2. 定义 TableComponent 组件

    • 接受 fetchDatacolumns 作为组件属性。
    • 使用 useTable Hook 获取表格数据和操作函数。
    • 渲染表格头部、主体和分页组件,并绑定相关事件。
  3. 使用通用型表格组件

    • ExampleTable.vue 中定义列配置和数据获取函数。
    • 使用 TableComponent 并传递 fetchDatacolumns 属性。
相关推荐
计算机-秋大田7 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml418 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf21 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班