模块:https://github.com/matfish2/vue-tables-2
我正在创建一个CRUD应用。如何在vue-tables-2中重新加载通过Ajax调用获取的数据?我想在我的应用程序中的某个地方执行更新语句后重新加载表。
Vue-tables在我的设置中使用了vuex。
<v-server-table
name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
</v-server-table>
编辑:为数据属性添加了表格的Javascript代码。
export default {
data() {
return {
columns: ['ID','NAME', 'POSITION', 'APPLICATIONS','DESCRIPTION','STATUS','ENCODED_BY'],
options: {
responseAdapter: (resp) => {
resp = resp.map(item => ({
ID: item.ID,
FK_ID: item.FK_ID,
NAME: `${item.FIRSTNAME} ${item.LASTNAME}`,
POSITION: item.POSITION,
APPLICATIONS: item.APPLICATIONS,
DESCRIPTION: item.DESCRIPTION,
STATUS: item.STATUS,
ENCODED_BY: item.ENCODED_BY,
TOTAL: item.TOTAL
}));
let count;
if(resp[0] != null) {
count = resp[0]['TOTAL']
}
else {
count = 0
}
return {
data: resp,
count: count
}
},
headings: {
'ID': <span># </span>,
'NAME':'Name',
'POSITION':'Position',
'APPLICATIONS':'Applications',
'DESCRIPTION':'Description',
'STATUS': 'Status',
'ENCODED_BY':'Encoded By',
'edit': 'Options'
},
columnsClasses: {
ID: 'col-md-1',
NAME:'col-md-2 pointer',
POSITION: 'col-md-2',
APPLICATIONS: 'col-md-2',
DESCRIPTION: 'col-md-2',
STATUS: 'col-md-1',
ENCODED_BY: 'col-md-2',
},
templates: {
NAME: (h, row) => {
return <a on-click={ () => this.setUpdateID(row) }>{row.NAME}</a>
},
APPLICATIONS: (h,row) => {
return (<ul>{JSON.parse(row.APPLICATIONS).map((val)=>(<li>{val}</li>))}</ul>);
},
STATUS: (h, row) => {
if(row.STATUS == 1) {
return <span class="label label-success">Active</span>
}
else if(row.STATUS == 0) {
return <span class="label label-danger">Inactive</span>
}
}
},
},
}
},
methods: {
setUpdateID: function(row) {
this.$store.commit('SET_UPDATE_ID', row.FK_ID);
}
}
}
答案 0 :(得分:1)
如记录所示,您应该使用refresh
方法。
您可以阅读refs
here
<v-server-table ref="table"
name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
</v-server-table>
使用Javascript:
methods:{
onUpdate() {
this.$refs.table.refresh();
}
}
答案 1 :(得分:0)
要用更新的数据重新加载vuetable,您有两种方法:
1。
在代码中选择带有$ refs的vuetable组件,然后调用refresh方法,如下所示: html文件:
<v-server-table ref="userAdminVueTable"
name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
js文件:
this.$refs.userAdminVueTable.refresh()
2。 拥有数据后,可以为vuetable调用setData方法。
this.vuetable.setData(updatedData);
在下面,我为您编写了一个示例,您可以从中得到启发:
this.Service.GetAllRecords().then(result => {
this.vuetable.setData(result);
}).catch(e => {
this.showAlert = true
this.message = ` Exception : ${e}`
})
}
答案 2 :(得分:0)
您不需要刷新它,如果刷新的话,状态将是清楚的。您可以使用以下示例
methods:{
onUpdate(rowIndex) {
this.$refs.table.data.splice(rowIndex, 1);
}
}
<v-server-table ref="table"
name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
</v-server-table>