vxe-table刷新的API的使用
<template>
<div>
<vxe-toolbar>
<template v-slot:buttons>
<vxe-button @click="refreshTable">刷新表格</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
ref="vxeTable"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
</vxe-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{ id: 10001, name: 'Test1', sex: 'Man', age: 28 },
{ id: 10002, name: 'Test2', sex: 'Women', age: 22 },
{ id: 10003, name: 'Test3', sex: 'Man', age: 32 },
{ id: 10004, name: 'Test4', sex: 'Women ', age: 24 }
]
}
}
methods: {
refreshTable(){
this.$refs.vxeTable.loadData(this.tableData) //获取dom,然后调用方法
}
}
}
</script>
<style scoped>
</style>
可以参考 this.$refs.vxeTable.loadData(this.tableData) 这行代码,进而可以知道其他 API 的使用方法,都是获取 dom,然后调用 API。
官网还有一种 reloadData 的方法,reloadData 和 loadData的区别在于是否清除数据的所有状态。

浙公网安备 33010602011771号