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的区别在于是否清除数据的所有状态。