I have built vuejs data table and now I want add checboxes in my data table I have read many articles but I am stuck how to add into my data table I am new in vuejs and i need your help.I have shortened my code so it should be readable and understandable for you.
My template
<template>
<div class="users-style">
<div style="margin-bottom: 20px;">
</div>
<table class="table table-bordered table-responsive">
<thead>
</thead>
<tbody>
<tr v-for="user in paginatedUsers" :key="user.id">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</template>
My script
<script>
export default {
created() {
this.getUsers();
Fire.$on('reloadUsers', () => {
this.getUsers();
})
},
data() {
let sortOrders = {};
let columns = [
{label: 'ID', name: 'id' },
{label: 'User Id', name: 'user_id'},
{label: 'Message Title', name: 'message_title'},
{label: 'Process Type', name: 'process_type'},
{label: 'Message Code', name: 'msg_code'},
{label: 'Log Type', name: 'log_type'},
{label: 'Date Time', name: 'created_at'},
];
columns.forEach((column) => {
sortOrders[column.name] = -1;
});
return {
users: [],
columns: columns,
tableShow: {
showdata: true,
},
}
},
methods: {
getUsers() {
axios.get('/users/', {params: this.tableShow})
.then(response => {
console.log('The data: ', response.data);
this.users = response.data;
this.pagination.total = this.users.length;
})
.catch(errors => {
console.log(errors);
});
},
},
};
</script>
I have also shared my current output of my data table and now I want to apply checkboxes on each record and one checkbox on top which i select then all checkboxes should be select. i am really stuck in this i need your help.
Aucun commentaire:
Enregistrer un commentaire