vue中vxe-table表格加载数据的两种方式详解

数据驱动和配置式加载。下面详细解释这两种方式的使用方法和区别。

1. 数据驱动方式（推荐）

这是最常用且简单的方式，直接通过 data 属性绑定数据源。

基本用法

<template>
  <vxe-table
    :data="tableData"
    :loading="loading"
    border
    stripe>
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="age" title="年龄"></vxe-column>
    <vxe-column field="role" title="角色"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: []
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        // 模拟 API 请求
        const response = await fetch('/api/user/list');
        this.tableData = await response.json();
      } catch (error) {
        console.error('数据加载失败:', error);
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

分页场景

<template>
  <div>
    <vxe-table
      :data="tableData"
      :loading="loading"
      border>
      <!-- 列配置 -->
      <vxe-column field="id" title="ID"></vxe-column>
      <vxe-column field="name" title="姓名"></vxe-column>
    </vxe-table>

    <vxe-pager
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      :total="page.total"
      @page-change="handlePageChange">
    </vxe-pager>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        const params = {
          page: this.page.currentPage,
          size: this.page.pageSize
        };
        const response = await fetch(`/api/data?${new URLSearchParams(params)}`);
        const result = await response.json();

        this.tableData = result.list;
        this.page.total = result.total;
      } catch (error) {
        console.error('数据加载失败:', error);
      } finally {
        this.loading = false;
      }
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.loadData();
    }
  }
}
</script>

2. 配置式加载方式

这种方式通过 proxy-config 配置代理，让表格自动处理数据请求和分页。

基本配置

<template>
  <vxe-table
    border
    stripe
    height="500"
    :proxy-config="tableProxy"
    :columns="tableColumn">
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      // 表格列配置
      tableColumn: [
        { type: 'seq', width: 60 },
        { field: 'name', title: '姓名' },
        { field: 'age', title: '年龄' },
        { field: 'role', title: '角色' }
      ],
      // 代理配置
      tableProxy: {
        props: {
          result: 'items',    // 响应结果列表字段
          total: 'total'      // 响应结果总数字段
        },
        ajax: {
          // 分页查询
          query: ({ page, sorts, filters }) => {
            return fetch('/api/user/page', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                pageSize: page.pageSize,
                currentPage: page.currentPage,
                sorts,
                filters
              })
            }).then(res => res.json());
          }
        }
      }
    }
  }
}
</script>

完整示例（带搜索和排序）

<template>
  <div>
    <!-- 搜索区域 -->
    <div style="margin-bottom: 20px;">
      <vxe-input v-model="form.name" placeholder="姓名"></vxe-input>
      <vxe-button @click="searchData">搜索</vxe-button>
      <vxe-button @click="resetSearch">重置</vxe-button>
    </div>

    <!-- 表格 -->
    <vxe-table
      ref="tableRef"
      border
      stripe
      height="500"
      :proxy-config="tableProxy"
      :columns="tableColumn">
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        role: ''
      },
      tableColumn: [
        { type: 'seq', width: 60 },
        { 
          field: 'name', 
          title: '姓名',
          sortable: true  // 启用排序
        },
        { field: 'age', title: '年龄' },
        { field: 'role', title: '角色' }
      ],
      tableProxy: {
        props: {
          result: 'list',
          total: 'total'
        },
        ajax: {
          query: ({ page, sorts, filters }) => {
            // 合并查询条件
            const queryParams = {
              ...this.form,
              pageSize: page.pageSize,
              currentPage: page.currentPage,
              sorts,
              filters
            };

            return fetch('/api/user/list', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(queryParams)
            }).then(res => res.json());
          }
        }
      }
    }
  },
  methods: {
    // 搜索
    searchData() {
      this.$refs.tableRef.commitProxy('reload'); // 重新加载数据
    },
    // 重置搜索条件
    resetSearch() {
      this.form = {
        name: '',
        role: ''
      };
      this.searchData();
    }
  }
}
</script>

两种方式的对比

特性	数据驱动方式	配置式加载方式
使用难度	简单直观	需要学习配置语法
控制粒度	完全手动控制	表格自动处理
代码量	较多	较少
分页处理	手动处理分页逻辑	自动处理
排序/过滤	手动处理	自动处理
适用场景	简单表格、固定数据	复杂表格、需要自动分页排序

使用建议

选择数据驱动方式的情况：

数据量不大，不需要分页需要完全控制数据加载过程表格结构简单，不需要复杂的排序/过滤数据来源多样（如多个接口组合）

选择配置式加载方式的情况：

需要分页、排序、过滤功能希望减少重复的分页逻辑代码表格功能复杂，需要自动处理数据请求后端接口规范统一

性能优化建议

<template>
  <vxe-table
    :data="tableData"
    :loading="loading"
    height="600"
    :scroll-y="{ enabled: true, gt: 50 }"  // 虚拟滚动
    :row-config="{ keyField: 'id' }"       // 设置行key
    border>
    <!-- 列配置 -->
  </vxe-table>
</template>

<script>
export default {
  methods: {
    // 防抖加载
    debounceLoadData: _.debounce(function() {
      this.loadData();
    }, 300),

    // 节流加载
    throttleLoadData: _.throttle(function() {
      this.loadData();
    }, 1000)
  }
}
</script>