vue中vxe-table表格加載數(shù)據(jù)的兩種方式詳解
更新時間：2026年01月09日 08:48:21 作者：放牛的小伙
這篇文章主要為大家詳細(xì)介紹了vue中vxe-table表格加載數(shù)據(jù)的兩種方式詳解,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
vue 表格 vxe-table 加載數(shù)據(jù)的幾種方式，更新數(shù)據(jù)的用法，vue 最強(qiáng)大的表格組件，支持 vue2 和 vue3，功能太多，這里介紹基礎(chǔ)用法
雙向綁定 data 方式
數(shù)據(jù)是雙向同步的，修改 data 就可以自動刷新
<template>
<div>
<vxe-button status="primary" @click="loadList1Event">修改1</vxe-button>
<vxe-button status="primary" @click="loadList2Event">修改2</vxe-button>
<vxe-button status="primary" @click="loadList3Event">修改3</vxe-button>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
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 = () => {
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 = () => {
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 = () => {
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' }
]
}
</script>
調(diào)用方法刷新數(shù)據(jù)
除了修改 data 之外，還可以通過調(diào)用 loadData、reloadData 方法刷新數(shù)據(jù)
<template>
<div>
<vxe-button status="primary" @click="loadList1Event">修改1</vxe-button>
<vxe-button status="primary" @click="loadList2Event">修改2</vxe-button>
<vxe-button status="primary" @click="loadList3Event">修改3</vxe-button>
<vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
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 = () => {
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 = () => {
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 = () => {
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' }
])
}
}
</script>
到此這篇關(guān)于vue中vxe-table表格加載數(shù)據(jù)的兩種方式詳解的文章就介紹到這了,更多相關(guān)vxe-table表格加載數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Pinia 是2019年由vue.js官方成員重新設(shè)計(jì)的新一代狀態(tài)管理庫,類似Vuex,下面我們就來學(xué)習(xí)一下如何通過Pinia實(shí)現(xiàn)持久化存儲的相關(guān)知識,感興趣的小伙伴可以了解下2023-12-12
Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)詳解(select空白bug解決)
最近開始學(xué)習(xí)vue,在學(xué)習(xí)的過程中遇到的問題將記錄在這里,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)(select空白bug解決)的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue3動態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題
這篇文章主要為大家詳細(xì)介紹了vue3如何通過動態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-01-01
vue使用GraphVis開發(fā)無限拓展的關(guān)系圖譜的實(shí)現(xiàn)
本文主要介紹了vue使用GraphVis開發(fā)無限拓展的關(guān)系圖譜，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法，有需要的朋友可以借鑒參考下，希望可以有所幫助，祝大家多多進(jìn)步早日升職加薪2021-09-09
解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue中避免濫用this去讀取data中數(shù)據(jù)
這篇文章主要介紹了Vue中避免濫用this去讀取data中數(shù)據(jù)的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的詳細(xì)實(shí)例
在許多的后臺系統(tǒng)中少不了導(dǎo)出Excel表格的功能,下面這篇文章主要給大家介紹了關(guān)于Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue使用vue-simple-uploader上傳文件夾實(shí)現(xiàn)方式
本文介紹使用vue-simple-uploader上傳文件夾的流程：前端點(diǎn)擊按鈕選擇文件夾,確認(rèn)上傳并顯示進(jìn)度；后端SpringBoot接收文件夾數(shù)據(jù),完成傳輸與處理2025-09-09
這篇文章主要介紹了Vue組件間通信-Vuex,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08