vue-tables-2의 데이터 새로고침(Vuex)
모듈: https://github.com/matfish2/vue-tables-2
CRUD 앱을 만들고 있습니다.Ajax 콜을 통해 가져온 데이터를 vue-tables-2로 새로고침하려면 어떻게 해야 합니까?앱 어딘가에서 업데이트 스테이트먼트가 실행된 후 테이블을 새로고침하고 싶었습니다.
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);
}
}
}
문서화된 바와 같이refresh
방법.에 대해 읽어보실 수 있습니다.refs
여기서
<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.
코드에 $refs가 포함된 표시 가능한 컴포넌트를 선택하고 리프레시 메서드를 호출합니다.html file :
<v-server-table ref="userAdminVueTable"
name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
js 파일:
this.$refs.userAdminVueTable.refresh()
2. 데이터가 있는 경우 setData 메서드를 호출하여 볼 수 있습니다.
this.vuetable.setData(updatedData);
아래에 예를 하나 적겠습니다.그것으로부터 영감을 얻을 수 있습니다.
this.Service.GetAllRecords().then(result => {
this.vuetable.setData(result);
}).catch(e => {
this.showAlert = true
this.message = ` Exception : ${e}`
})
}
새로 고치면 상태가 명확해지기 때문에 새로 고칠 필요가 없습니다.아래 예를 사용할 수 있습니다.
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>
언급URL : https://stackoverflow.com/questions/47544245/reload-data-of-vue-tables-2-vuex
'programing' 카테고리의 다른 글
fread는 실제로 어떻게 작동합니까? (0) | 2022.08.25 |
---|---|
PHP의 join()과 같은 어레이의 Java 함수? (0) | 2022.08.25 |
C의 롤링 중위수 알고리즘 (0) | 2022.08.25 |
@vue/cli-plugin-unit-mocha, TypeScript 및 SFC를 사용한 VueJ 프로젝트의 NYC 커버리지 보고서 생성 (0) | 2022.08.25 |
java.util을 피하는 방법동시 수정Array List에서 요소를 삭제하고 반복할 때의 예외 (0) | 2022.08.25 |