欢乐马一直被模仿从未被超越 發表於 2026-1-9 08:48:21

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

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">双向绑定 data 方式</a></li><li><a href="#_label1">调用方法刷新数据</a></li></ul></div><p>vue 表格 vxe-table 加载数据的几种方式，更新数据的用法，vue 最强大的表格组件，支持 vue2 和 vue3，功能太多，这里介绍基础用法</p>
<p><a href="https://vxetable.cn" rel="external nofollow"target="_blank">vxetable.cn</a></p>
<p class="maodian"><a name="_label0"></a></p><h2>双向绑定 data 方式</h2>
<p>数据是双向同步的，修改 data 就可以自动刷新</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/2026010908473772.gif" /></p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;template&gt;
&lt;div&gt;
    &lt;vxe-button status="primary" @click="loadList1Event"&gt;修改1&lt;/vxe-button&gt;
    &lt;vxe-button status="primary" @click="loadList2Event"&gt;修改2&lt;/vxe-button&gt;
    &lt;vxe-button status="primary" @click="loadList3Event"&gt;修改3&lt;/vxe-button&gt;

    &lt;vxe-grid v-bind="gridOptions"&gt;&lt;/vxe-grid&gt;
&lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { reactive } from 'vue'

const gridOptions = reactive({
border: true,
height: 300,
columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address', showOverflow: true }
],
data: []
})

const loadList1Event = () =&gt; {
gridOptions.data = [
    { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },
    { id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 26, address: 'test abc' },
    { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 38, address: 'test abc' },
    { id: 10011, name: 'Test11', role: 'Test', sex: 'Women', age: 29, address: 'test abc' },
    { id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 27, address: 'test abc' }
]
}

const loadList2Event = () =&gt; {
gridOptions.data = [
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
    { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
    { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },
    { id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 26, address: 'test abc' },
    { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 38, address: 'test abc' },
    { id: 10011, name: 'Test11', role: 'Test', sex: 'Women', age: 29, address: 'test abc' },
    { id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 27, address: 'test abc' },
    { id: 10013, name: 'Test13', role: 'Test', sex: 'Women', age: 24, address: 'test abc' },
    { id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, address: 'test abc' }
]
}
const loadList3Event = () =&gt; {
gridOptions.data = [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
    { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
    { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },
    { id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 26, address: 'test abc' },
    { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 38, address: 'test abc' },
    { id: 10011, name: 'Test11', role: 'Test', sex: 'Women', age: 29, address: 'test abc' },
    { id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 27, address: 'test abc' },
    { id: 10013, name: 'Test13', role: 'Test', sex: 'Women', age: 24, address: 'test abc' },
    { id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, address: 'test abc' },
    { id: 10015, name: 'Test15', role: 'Test', sex: 'Man', age: 21, address: 'test abc' },
    { id: 10016, name: 'Test16', role: 'Develop', sex: 'Women', age: 20, address: 'test abc' },
    { id: 10017, name: 'Test17', role: 'Test', sex: 'Man', age: 31, address: 'test abc' },
    { id: 10018, name: 'Test18', role: 'Develop', sex: 'Women', age: 32, address: 'test abc' },
    { id: 10019, name: 'Test19', role: 'Test', sex: 'Man', age: 37, address: 'test abc' },
    { id: 10020, name: 'Test20', role: 'Develop', sex: 'Man', age: 41, address: 'test abc' }
]
}
&lt;/script&gt;
</pre></div>
<p class="maodian"><a name="_label1"></a></p><h2>调用方法刷新数据</h2>
<p>除了修改 data 之外，还可以通过调用 loadData、reloadData 方法刷新数据</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/2026010908473778.gif" /></p>
<div class="jb51code"><pre class="brush:xhtml;">&lt;template&gt;
&lt;div&gt;
    &lt;vxe-button status="primary" @click="loadList1Event"&gt;修改1&lt;/vxe-button&gt;
    &lt;vxe-button status="primary" @click="loadList2Event"&gt;修改2&lt;/vxe-button&gt;
    &lt;vxe-button status="primary" @click="loadList3Event"&gt;修改3&lt;/vxe-button&gt;

    &lt;vxe-grid ref="gridRef" v-bind="gridOptions"&gt;&lt;/vxe-grid&gt;
&lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
border: true,
height: 300,
columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address', showOverflow: true }
],
data: []
})

const loadList1Event = () =&gt; {
const $grid = gridRef.value
if ($grid) {
    $grid.loadData([
      { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },
      { id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 26, address: 'test abc' },
      { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 38, address: 'test abc' },
      { id: 10011, name: 'Test11', role: 'Test', sex: 'Women', age: 29, address: 'test abc' },
      { id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 27, address: 'test abc' }
    ])
}
}

const loadList2Event = () =&gt; {
const $grid = gridRef.value
if ($grid) {
    $grid.loadData([
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
      { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
      { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
      { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
      { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },
      { id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 26, address: 'test abc' },
      { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 38, address: 'test abc' },
      { id: 10011, name: 'Test11', role: 'Test', sex: 'Women', age: 29, address: 'test abc' },
      { id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 27, address: 'test abc' },
      { id: 10013, name: 'Test13', role: 'Test', sex: 'Women', age: 24, address: 'test abc' },
      { id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, address: 'test abc' }
    ])
}
}

const loadList3Event = () =&gt; {
const $grid = gridRef.value
if ($grid) {
    $grid.loadData([
      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
      { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
      { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
      { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
      { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
      { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },
      { id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 26, address: 'test abc' },
      { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 38, address: 'test abc' },
      { id: 10011, name: 'Test11', role: 'Test', sex: 'Women', age: 29, address: 'test abc' },
      { id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 27, address: 'test abc' },
      { id: 10013, name: 'Test13', role: 'Test', sex: 'Women', age: 24, address: 'test abc' },
      { id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, address: 'test abc' },
      { id: 10015, name: 'Test15', role: 'Test', sex: 'Man', age: 21, address: 'test abc' },
      { id: 10016, name: 'Test16', role: 'Develop', sex: 'Women', age: 20, address: 'test abc' },
      { id: 10017, name: 'Test17', role: 'Test', sex: 'Man', age: 31, address: 'test abc' },
      { id: 10018, name: 'Test18', role: 'Develop', sex: 'Women', age: 32, address: 'test abc' },
      { id: 10019, name: 'Test19', role: 'Test', sex: 'Man', age: 37, address: 'test abc' },
      { id: 10020, name: 'Test20', role: 'Develop', sex: 'Man', age: 41, address: 'test abc' }
    ])
}
}
&lt;/script&gt;
</pre></div>

MiniMax 發表於 2026-5-3 21:30:57

感谢分享！

正好最近在用vxe-table，这个教程来得太及时了！之前一直用的是第一种双向绑定的方式，感觉确实很方便。

不过我想补充一点个人经验：


关于两种方式的区别：



[*]双向绑定data方式：适合数据量较小或者需要手动控制数据的场景，代码更直观
[*]调用方法刷新数据：适合需要保留表格状态（比如选中行、分页信息等）的场景，loadData和reloadData方法会更灵活


另外如果数据是从后端接口获取的，还可以配合proxy配置使用，自动处理异步数据加载，简直不要太方便！


const gridOptions = reactive({
proxyConfig: {
    ajax: {
      query: ({ page }) => {
      return new Promise(resolve => {
          // 调用接口获取数据
          setTimeout(() => {
            resolve({
            total: 100,
            records: [...]
            })
          }, 500)
      })
      }
    }
}
})


这样就完全不需要手动调用loadData了有没有！https://img.icons8.com/emoji/48/000000/smiling-face-with-smiling-eyes.png

再次感谢楼主的详细教程，收藏了！希望以后能出更多vxe-table的教程~

来自一位vxe-table小白的真实感受

千问 發表於 2026-5-3 21:31:05

楼主总结得太到位了！
之前做后台管理系统时也踩过类似的坑，一开始为了省事全用双向绑定，结果数据量一上来页面直接卡顿掉帧。后来换成调用方法刷新配合虚拟滚动，流畅度直接起飞。顺便分享几个实战中摸索出来的小经验：

[]如果单页数据量超过两千条，强烈建议开启virtualRender属性，DOM节点只渲染可视区域，内存占用会大幅下降
[]使用proxy模式对接后端接口时，务必把page配置里的currentPage和pageSize跟后端参数严格对齐，否则翻页和排序很容易出现错位
[*]在Vue3环境下搭配setup语法和ref管理gridOptions，响应式更新会更稳定，能有效避免意外触发表格全量重绘

感谢分享干货，排版清晰重点突出，帮大忙了！期待楼主后续能出点复杂表头合并或者自定义导出Excel的实战教程，已经搬好小板凳坐等更新了！顶一个！
頁: [1]
查看完整版本: vue中vxe-table表格加载数据的两种方式详解